Javascript 如何使用d3.js更新饼图

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

我可以使用以下代码从第一组数据成功创建饼图

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通用更新模式，但我还不太了解它

如果有人对如何解决我的问题或改进我的代码有任何建议，我们将不胜感激：）

---

谢谢

因为

progress.pie.vars.svg

包含新添加的元素，所以您不需要

selectAll（“svg”）

。这将选择

svg

元素下的任何

svg

元素。您应该能够直接在所选内容上调用

数据

对于

progress.pie.vars.path

data绑定，看起来您只是在处理用于添加新路径的输入情况（尽管您没有像处理原始pie那样分配

d

path属性）。您需要为新数据添加新圆弧，并为更新的数据更新圆弧。可以通过将“更新”选择与“输入”选择分开来执行此操作：

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);

添加到enter选择中的新节点将隐式添加到更新选择中，以便最后一行将在新的和现有的节点上运行。（注意，这不处理退出）

---

你应该看看Mike Bostock的精彩教程。

谢谢你的回答，它澄清了一些问题。现在一切都正常了，除了每次代码都会重新绘制所有路径。我想增强它来做这样的事情。我可以在这里再粘贴一些代码供您查看吗？我唯一的问题是饼图由于某种原因无法转换。不确定这是否是您当前的问题，但您需要一个自定义的tween来很好地插值圆弧角度。查看链接到的示例中的arcTween（）。圆弧确实正确插值，但它只是不过渡。这里我存储的角度，取自我链接的示例

.attrTween（“d”，progress.pie.tweenPie）

.each（函数（d）{this.\u current=d；}）tweenPie版本：函数（b）{var arc=d3.svg.arc（）.innerRadius（progress.pie.vars.innerRadius）.outerRadius（progress.pie.vars.outerRadius）；b.innerRadius=0；var i=d3.interpolate（this.\u current，b）；this.\u current=i（0）；return function（t）{return arc（i（t））；}；}

Hmm，如果您的attrTween（）位于调用链中的transition（）之后，它应该完成它的工作。您可以链接到最终代码所在的bl.ocks或jsFiddle吗？