javascript - 向饼图添加路径过渡

Question

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

http://jsfiddle.net/EuK6H/4/

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

问题是当新数据进来时我需要能够转换路径(以及 fiddle 中显示的文本节点)但是输入选择是在父组上进行的。如何添加 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);