正確更新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