javascript - 正确更新 D3 饼图

Question

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

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

这是CodePen link也是如此。

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

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. 的链接

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

Answer 1

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

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

首先，您的第二个数据数组 .data(pie(d2_data2)) 存在拼写错误，应为 .data(pie(data2))

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

我已经概括了您的代码，以便您只需将所需的数组传递给 update() 就可以了。