d3.js - 餅圖的圓弧平滑過渡

Question

我已經在d3中組合了一個餅圖，並且使用了每個圓弧繪製時的過渡和延遲。

代碼段：

var path = g.selectAll("path") 
    .data(pie(dataset.apples)) 
    .enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .transition() 
    .delay(function(d, i) { 
     return i * 100; 
    }) 
    .duration(500) 
    .attr("d", arc); 

工作fiddle

我想實現一個平穩的過渡，使每個弧出現從一個，因爲他們被吸引，直到序列增長到另一個，而而不是像現在這樣立即出現。

有人可以給我一些幫助嗎？ 感謝

Answer 1

我可以建議2點的方式來做到這一點的動畫：

動畫1與延遲的幫助在這裏一個片長，然後下一個片將增長進行。

//the tween will do the animation as end angle increase over time 
var path = g.selectAll("path") 
    .data(pie(dataset.apples)) 
    .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); 
    } 
}); 

工作示例here

動畫2每片生長與時間​​

var path = g.selectAll("path") 
    .data(pie(dataset.apples)) 
    .enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .transition() 
    .duration(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); 
    } 
}); 

工作代碼here

希望這有助於實現@same時間！