Question

我正在用d3.js绘制一个饼图。我想在添加新数据时转换饼图切片。（我使用可重复使用的图表API）。我首先使用enter创建一个图表组，然后将图表弧路径附加到：

var arcGroup = svg.select(".pie").selectAll(".arc " + selector)
                  .data(pie(data))
                  .enter().append("g")
                  .attr("class", "arc " + selector);
                  if (options.left) {
                      arcGroup.attr('transform', 'translate(' + options.left + ',' + options.top + ')');
                  } else {
                      arcGroup.attr('transform', 'translate(' + options.width / 2 + ',' + options.height / 2 + ')');
                  }

//append an arc path to each group
arcGroup.append("path")
        .attr("d", arc)
        //want to add the transition in here somewhere
        .attr("class", function (d) { return 'slice-' + d.data.type; })
        .style("fill", function (d, i) {
            return color(d.data.amount)
        });
       //...

问题是当新数据进入时我需要能够转换路径（以及小提琴中显示的文本节点），但输入选择是在父组上进行的。如何添加transition()以使其适用于路径？

Answer 1

您可以使用.select()，它会将数据传播到所选元素。然后，您可以根据新数据应用转换。代码看起来像这样：

var sel = svg.selectAll(".pie").data(pie(newData));

// handle enter + exit selections

// update paths
sel.select("path")
   .transition()
   .attrTween("d", arcTween);

将路径转换添加到饼图

1 个答案: