javascript - d3.js での円グラフのサイズ変更の遷移

Question

円グラフのサイズ変更 (円弧のパス) の遷移を行う方法の例を探しています。この例を見てきましたが、サイズ変更時にトランジションを行うために変更する方法がまだわかりません。これまでのところ、アーク オブジェクトの outerRadius (および innerRadius) を変更することで円グラフのサイズを変更できますが、トランジションはうまくいきません。これが私が取り組んでいる例です。

arc.innerRadius(newInnerRad)
   .outerRadius(newOuterRad);

path.transition().duration(500).attrTween("d", arcTween);

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

何か案は？

Answer 1

インラインを作成arcTweenし、半径の補間を追加すると機能します -更新されたフィドルを参照してください。