如何更新D3饼图

对不起，我意识到人们对如何做到这一点吨的材料，我已经受够了一些教程，看着虽然一些官方的GIST（像this one），但我仍然无法弄清楚。

正如你将在我的jsfiddle中看到的那样，图表用第一组数据呈现 - 但是当我单击更新按钮时图表根本不会改变。

update方法确实火，路径‘d’值是更新（通过观看在Firebug这些元素作为确认） - 它只是路径新‘d’的价值观是相同的旧的。

我需要在这里做些什么改变？几个小时以来，我一直在对着这堵墙猛撞我的头，尝试文档和教程所说的每一个不同的东西 - 我无法弄清楚。

谢谢！

而且，这里的更新方法 - 有人可能会发现问题，甚至不必看小提琴...

function updateData(dataset){ 
    //console.info(dataset); 

    // Set Data 
    var allSlices = slicesGroup 
      .selectAll(".slice") 
       .data(pie(dataset)); 

    // Create New Slices 
    var newSlices = allSlices 
      .enter() 
      .append("g") 
       .attr("class", "slice"); 

    newSlices 
     .append("g") 
      .attr("class", "outer") 
      .append("path"); 

    newSlices 
     .append("g") 
      .attr("class", "inner") 
      .append("path"); 

    // Update All Slices 
    allSlices 
     .selectAll(".outer") 
      .selectAll("path") 
       .attr("d", outerArc); 

    allSlices 
     .selectAll(".inner") 
      .selectAll("path") 
       .attr("d", innerArc); 

    //console.log(newSlices); 
    //console.log(allSlices); 

    // Remove Old Slices 
    allSlices.exit().remove(); 
};

来源

2014-03-02 encoder

该问题与您的嵌套数据结构有关。您的新数据已成功加入到您的“切片”元素中，但不会与您的“内部”和“外部”<g>元素和<path>元素本身结合。

修复很简单，但非直观。替换allSlices.selectAll(".inner").selectAll("path")与allSlices.select(".inner").select("path")和“外”组相同。

http://jsfiddle.net/z25SU/1/

随着selection.select()the selected element inherits the updated data from the parent，与在.selectAll()任何现有的数据不被改变。这些重要的区别在教程中并不经常强调。然而，它是有道理的 - 如果你选择了selectAll许多元素，他们应该各自拥有自己的数据，让他们都从父级收到相同的值是没有意义的。

来源

2014-03-03 02:21:17 AmeliaBR

Arg！我知道这将是简单的：P谢谢你的答案，尤其是解释！ – encoder

我已经改变了输入，更新代码。这里是FIDDLE。

您可以在update函数中使用data2或data3。

来源

2014-03-03 00:02:37 FernOfTheAndes

这只是增加了新的''元素的顶部......它可能会变得非常混乱，多个更新！ – AmeliaBR

是的，好点...我看到所有生成的svg元素，并不熟悉饼图布局，也许这是它的一个神器。回到绘图板......但对我来说太迟了...请随时用新的答案清理我的混乱，如果你有能量......谢谢。 – FernOfTheAndes

@encoder ...同意。 – FernOfTheAndes

如何更新D3饼图

回答

相关问题