正确更新D3饼图

我有一张从数组数组中获取数据的饼图。这些数字根据用户拥有的某些控件动态更改。无论如何，我已经创建了第二个数组data2和data。正确更新D3饼图

我试过通过一些解决方案：使用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.

任何帮助是极大的赞赏。谢谢。

来源

2017-03-07 Jacob Johnson