如何使用d3.js更新饼图 [英] How to update pie chart using 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）
。 {this.currentAngles = d;}）; //存储初始角度; 
 
 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的一般更新模式，但我还不太明白。

如果任何人有任何建议如何解决我的问题或改善我的代码，那么它非常赞赏：）

p>

解决方案

由于 progress.pie.vars.svg 包含新添加的元素，您不需要 selectAll（svg）。这将选择 svg 元素下的任何 svg 元素。您应该可以直接在选择中调用 data 。

对于 progress.pie.vars.path 数据绑定，看起来你只是处理添加新路径的输入大小写（虽然你没有分配 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）; 
  

添加到输入选择中的新节点会隐式添加到更新选择中，对新的和存在的。 （注意，这不会处理退出）。

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

I have two different data sets and I am trying to create pie charts with the first set and then listen for an event and transition to the second set.

I can successfully create the pie charts from the first set of data using this code

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

Note: I am using hardcoded data here, I can replicate using JSON but I wanted to simplify things just so I can get the transitions working.

This creates the svg's and renders them on the page but the problem occurs when I use the other data set and try to update the paths. Like this...

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

I have researched the d3 general update pattern but I don't quite understand it yet.

If anyone has any suggestions how to solve my problem or improve my code then its much appreciated :)

Thanks

解决方案

Since progress.pie.vars.svg contains the newly appended elements, you don't need to selectAll("svg"). That would be selecting for any svg elements under your svg elements. You should be able to just call data directly on the selection you have.

For the progress.pie.vars.path data bind, it looks like you're only handling the enter case for adding new paths (although you're not assigning a d path attribute as you did with the original pies). You'll want to add new arcs for new data and update the arcs for updated data. You can do this by keeping the update selection separate from the enter selection:

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

New nodes added to the enter selection are implicitly added to the update selection so that last line will be operating on both the new and existings. (Note this doesn't handle exit).

You should check out Mike Bostock's excellent tutorial Thinking With Joins.

这篇关于如何使用d3.js更新饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！