Question

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

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

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

1 个答案: