D3打字稿SVG附加功能無效

Question

我已經能夠使用D3和Angular獲取許多不同的對象，以正確地在DOM上填充。 Angular 4.4.6 D3 4.13.0類型/ d3 4.12.0我的問題是SVG會在第一次正確填充，但是不會通過按鈕或間隔持續時間進行更新。 我試過使用NgZone在angular之外運行它，但也沒有用。 我已經將我的代碼附加在Stackblitz中運行，並且還鏈接了JavaScript中的“工作”副本。 這是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

您沒有將新數據綁定到updateData的rect

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

也許令人驚訝的是，數據不是選擇的屬性，而是其元素的屬性。 這意味着當您將數據綁定到選擇項時，數據將存儲在DOM中而不是存儲在選擇項中：數據被分配給每個元素的data屬性。 如果元素缺少此屬性，則關聯的基准是不確定的。 因此，數據是持久的，而選擇可以被認為是短暫的：您可以從DOM中重新選擇元素，它們將保留先前綁定到它們的任何數據。

正確的方法是：

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);
        }