如何使用d3.js更新饼图

Question

我有两个不同的数据集，我试图用第一组创建饼图，然后监听事件并转换到第二组。

我可以使用此代码

var data = [[70, 30],[60, 40],[50, 50],[95, 5],[87, 13]]; 

progress.pie.vars.svg = d3.select(progress.pie.vars.pieEl).selectAll("svg") 
      .data(data) 
      .enter() 
      .append("svg") 
      .attr("width", 150) 
      .attr("height", 150) 
      .each(function(d) { this.currentAngles = d; }); // store the initial angles; 

progress.pie.vars.path = progress.pie.vars.svg.selectAll("path") 
      .data(function(d, i){ return pie(d) }) 
      .enter().append("path") 
      .attr("fill", function(d, i) { return color(i); }) 
      .attr("transform", "translate(" + 75 + ", " + 75 + ")") 
      .attr("d", arc); 

注成功创建从第一组数据的饼图：我在这里使用硬编码的数据，我可以使用JSON复制，但我想简化事情就这样我可以让转换工作。

这会创建svg并在页面上呈现它们，但是当我使用其他数据集并尝试更新路径时会出现问题。像这样...

var data = [[60, 40], [10, 10, 10, 70], [30, 70], [25, 25, 25, 25], [30, 35, 35]]; 

progress.pie.vars.svg = progress.pie.vars.svg.selectAll("svg") 
      .data(data); 

progress.pie.vars.path = progress.pie.vars.path 
      .data(function(d, i){ return pie(d) }) 
      .enter().append("path") 
      .transition() 
      .duration(5000); 

我研究了d3的一般更新模式，但我还不太了解它。

如果任何人有任何建议，就如何解决我的问题或改善我的代码，那么它的大加赞赏:)

感谢

Answer 1

由于progress.pie.vars.svg包含新追加的要素，你不需要selectAll("svg")。这将选择您的svg元素下的任何svg元素。您应该可以直接拨打data来选择您所拥有的。

对于progress.pie.vars.path数据绑定，它看起来像只处理添加新路径的输入大小写（尽管您没有像在原始饼中那样分配d路径属性）。您需要为新数据添加新弧线并更新更新数据的弧线。您可以通过保持更新选择从输入选择单独做到这一点：

progress.pie.vars.path = progress.pie.vars.path 
    .data(function(d, i){ return pie(d) }); 

progress.pie.vars.path.enter().append("path"); 

progress.pie.vars.path.attr("d", arc); 

新的节点加入到输入选择被默认添加到更新的选择，这样最后一行将在新，和existings进行操作。 （注意这不处理退出）。

你应该看看Mike Bostock的优秀教程Thinking With Joins。