javascript - d3.js 圆环图::渲染其他路径但未更新

Question

我在 d3 中渲染圆环图时遇到问题。我有 2 个 donut ，我正在为每个函数并排创建它们::

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