d3.js甜甜圈圖::渲染其他路徑，但未更新

Question

我在d3中渲染甜甜圈圖時遇到問題。 我有2個甜甜圈，每個功能都在a內並排創建：

         data.forEach(function(d,i){...}

圖表渲染良好。 當我去更新圖表時，將重繪路徑。 不知道為什么會這樣，因為我正在使用.enter（）

有什么建議嗎？

        var singleDonutData = [1];

        var donutSections=singleDonut.selectAll(".donutSections")
            .data(singleDonutData)
            .enter()
            .append("g")
            .attr("class","donutSections");

        var pathGroup = svg.select("." + donutName).select(".donutSections").selectAll("path.arc")
            .data(pie(d));

        var path = pathGroup
            .enter()
            .append('path')
            .style('fill', function(d){   //give arc a color in SVG Scale
                return color(d.data.label);
            })
            .attr("d", arc)
            .each(function(d) { this._current = d; }); // store the initial angles;

Answer 1

您需要在生成的路徑上添加相應的類名，例如：

var pathGroup = svg.select("." + donutName).select(".donutSections").selectAll("path.arc")
        .data(pie(d));

    var path = pathGroup
        .enter()
        .append('path')
        .style('fill', function(d){  
            return color(d.data.label);
        })
        .attr("class", "arc") // corresponding to selectAll("path.arc")
        .attr("d", arc)
        .each(function(d) { this._current = d; }); angles;

這樣，當您更新圖表時，d3可以正確選擇這些已經渲染的路徑。

此更新后，您還需要添加代碼來處理更新選擇。 像這樣：

pathGroup.transition().duration(1000)
.attrTween("d", function(d){
   // some transition animation code here if you need it.
})