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

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

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

如何使用d3.js更新饼图

1 个答案: