将路径转换添加到饼图

我正在绘制一个饼图d3.js。我想在添加新数据时转换饼图片。（我使用可重复使用的图表API）。我首先创建一个使用进入一个图表组，然后追加图表弧形路径：当新的数据进来，我需要能够转换的路径将路径转换添加到饼图

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()以适用于路径？

来源

2014-04-08 Mike Rifgin

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

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

// handle enter + exit selections 

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

来源

2014-04-08 11:04:57

谢谢。这似乎没有像我预期的那样工作。当我尝试删除路径时，我得到一个错误“Uncaught TypeError：Object [object Array] has no method'exit”http://jsfiddle.net/EuK6H/13/我无法删除路径吗？ –

输入，更新和退出选择在使用'.data（）'显式绑定数据之后可用，而不是在子选择之后。所以你必须做'sliceGroups.exit（）。select（...）。remove（）'，除非在这种情况下子选择没有意义。如果您不删除整个组，则更新时会匹配数据（匹配空组并且不添加任何您希望添加的内容）。 –

啊，我明白了。退出的选择并不是我真正需要的。我需要转换子选项 –

将路径转换添加到饼图

回答

相关问题