正确更新 D3 饼图答案

【问题标题】：Updating a D3 pie chart correctly正确更新 D3 饼图
【发布时间】：2017-03-07 14:17:46
【问题描述】：

我有一个饼图，它从一组数字中获取数据。这些数字会根据用户拥有的某些控件动态更改。无论如何，我在data 旁边创建了第二个数组data2。

我尝试了一些解决方案：使用 arcTween 或只是利用我所知道的关于更新条形图的知识；但是，与我能够更新的条形图相比，饼图的功能似乎有所不同。

无论如何，这是我的饼图的结构：

var color = ["red","blue","green","orange"];
var data = [10,12,15,17];
var data2 = [21,22,14,12];
var dataKey = ["Employed","Student","Unemployed","Retired"];
var radius = 200;
var canvas = d3.select("#general_graph").append("svg")
  .attr("width",400)
  .attr("height",400);

var group = canvas.append("g")
  .attr("transform","translate(200,200)");

var arc = d3.svg.arc()
  .innerRadius(120)
  .outerRadius(radius);

var pie = d3.layout.pie()
  .value(function(d){return d;});

var arcs = group.selectAll(".arc")
  .data(pie(data))
  .enter()
    .append("g")
    .attr("class","arc");

arcs.append("path")
  .attr("d",arc)
  .attr("fill",function(d,i){return color[i];});

var text = arcs.append("text")
  .attr("transform",function(d){return "translate("+arc.centroid(d)+")";})
  .attr("text-anchor","middle")
  .attr("font-size","1.5em")
  .attr("fill","#fff")
  .attr("font-family","Franklin Gothic")
  .text(function(d){ return Math.round(d.data); });

这按预期工作，但试图找到一个使用与我设置饼图相同的方式的示例图表似乎是不可能的。以下是我目前在升级方面的不足：

document.body.onkeyup = function(e){
    if(e.keyCode == 17)
    {
      /*
      arcs.data(pie(data2));
      canvas.selectAll("path")
        .attr("d",arc)
        .attr("fill",function(d,i){return color[i];}); */

      update();


      /*
      text
        .data(pie)
        .transition().duration(750)
        .attr("transform",function(d){return "translate("+arc.centroid(d)+")";})
        .text(function(d){ return Math.round(d.data); }); */
    }
}

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

function update(){
  var path = group.selectAll("path")
    .data(pie(d2_data2))
    .enter().append("path")
    .attr("fill", function(d, i) { return color[i]; })
    .transition()
    .delay(function(d, i) {
      return i * 800;
    })
    .attrTween('d', function(d) {
     var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
     return function(t) {
         d.endAngle = i(t);
       return arc(d);
     }
    });
}

如您所见，当按下“CTRL”键时，图表应该会升级；但是，由于我对饼图更新功能的误解，它没有。

同样，这里是CodePen posts.的链接

非常感谢任何帮助。谢谢。

【问题讨论】：

标签： javascript d3.js charts

【解决方案1】：

工作代码笔：http://codepen.io/anon/pen/JWbMGP?editors=1010

您的问题不在于饼图，而在于 D3 的数据连接。

首先，您的第二个数据数组 .data(pie(d2_data2)) 有一个错字应该是 .data(pie(data2))

您必须注意 D3 如何确定哪些数据是 enter 或 update data 和 data2 具有相同的长度，因此当您给 D3 data2 时，它会将其视为更新而不是比输入。

我已经概括了您的代码，因此您只需将所需的数组传递给update()，它应该可以工作。

【讨论】：