D3 arcTween - 更新多個餅圖的轉換

Question

我試圖創建一組d3餅圖，它們在返回json請求時繪製。

我可以使標籤和背景路徑工作，但我無法獲得前景路徑繪製。我嘗試創建多個餅圖時只遇到此問題。

我目前的進展情況的一個例子在這裏提供：
http://jsbin.com/wubohidefo/edit?html,js,output

任何幫助，您可以提供讓前臺工作路徑或解釋是什麼原因造成這將不勝感激。

Answer 1

當您返回arc(d)在arcTween：

function arcTween(transition, newAngle) { 
    transition.attrTween("name", function(d) { 

     var interpolate = d3.interpolate(d.endAngle, newAngle); 
     return function(t) { 
      d.endAngle = interpolate(t); 
      text.text(((d.endAngle/τ)*10).toFixed(1)); 
      return arc(d); 
     }; 
    }); 
} 

而應該被設置foreground.attr("d", arc)：

function arcTween(transition, newAngle) { 
    transition.attrTween("name", function(d) { 

     var interpolate = d3.interpolate(d.endAngle, newAngle); 
     return function(t) { 
      d.endAngle = interpolate(t);     
      text.text(((d.endAngle/τ)*10).toFixed(1)); 
      foreground.attr("d", arc); 
     }; 
    }); 
}