D3 arcTween - 複数の円グラフの遷移を更新する

Question

jsonリクエストが返されたときに描画されるd3円グラフのセットを作成しようとしました。

ラベルと背景パスが動作するようになりましたが、描画する前景パスを取得できません。私は複数の円グラフを作成しようとするとこの問題に遭遇します。

私の現在の進行状況の一例は、ここに提供されています
http://jsbin.com/wubohidefo/edit?html,js,output

あなたが働いてフォアグラウンドのパスを取得するか、これは非常に高く評価されるだろう引き起こしているかを説明するために提供することができます任意の助けを。

Answer 1

あなたはarcTweenでarc(d)を返す：

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); 
     }; 
    }); 
}