D3打字稿SVG附加功能无效

Question

I've been able to get numerous different objects to populate correctly on the DOM using D3 and Angular. Angular 4.4.6 D3 4.13.0 types/d3 4.12.0 My problem is the SVG will populate correctly the first time but will not update either through a button or through interval duration. I've tried running this outside of angular using NgZone and that did not work either. I have attached my code same running in Stackblitz and have also linked the "working" copy that is in JavaScript. Here is the link in Stackblitz https://stackblitz.com/edit/angular-df5mk8

update() {

    this.cdr.detectChanges();

    var svg = d3.select(this.root.nativeElement)
        .append('svg')
        .attr('height', 600)
        .attr('width', 600)
        .style('background-color', 'orange');

    var a = [1, 2, 3, 4, 5];
    var rects = svg.selectAll("rect").data(a);

    rects.enter().append("rect")
        .attr("x", function (d, i) { return i * 20; })
        .attr("width", "15px")
        .attr("height", function (d) { return d * 5; })
        .attr("data-currentVal", function (d) { return d });



    var updateData = function (newData: any) {
        rects.data(newData).transition().duration(2000)
            .attr("height", function (d: any) { return d * 5; })
            .attr("data-currentVal", function (d: any) { return d })
            .style("fill", function (d) {
                if (d3.select(this).attr("data-currentVal") != d) {
                    return "red";
                }
                else { return "black"; }
            });
        console.log("updateData" + 1);
    }


    a[1] = 10;
    a[4] = 50;
    var enough = false;
    var repeatFunction = window.setInterval(function () {
        //console.log("repeat");
        updateData(a);

        a[3] = 20;
        a[1] = 15;

        if (enough) { window.clearInterval(repeatFunction); }
        else { enough = true; }

    }, 3000);
}; 

Answer 1

You are not binding the new data to your rect in updateData

https://bost.ocks.org/mike/selection/#data

Perhaps surprisingly, data is not a property of the selection, but a property of its elements. This means that when you bind data to a selection, the data is stored in the DOM rather than in the selection: data is assigned to the data property of each element. If an element lacks this property, the associated datum is undefined. Data is therefore persistent while selections can be considered transient: you can reselect elements from the DOM and they will retain whatever data was previously bound to them.

The correct method is :

var updateData = function (newData: any) {
            svg.selectAll("rect").data(newData).transition().duration(2000)
                .attr("height", function (d: any) { return d * 5; })
                .attr("data-currentVal", function (d: any) { return d })
                .style("fill", function (d) {
                    if (d3.select(this).attr("data-currentVal") != d) {
                        return "red";
                    }
                    else { return "black"; }
                });
            console.log("updateData" + 1);
        }