javascript - d3.js を使用して円グラフを更新する方法

Question

2 つの異なるデータ セットがあり、最初のセットで円グラフを作成し、イベントをリッスンして 2 番目のセットに移行しようとしています。

このコードを使用して、最初のデータ セットから円グラフを正常に作成できます。

var data = [[70, 30],[60, 40],[50, 50],[95, 5],[87, 13]];

progress.pie.vars.svg = d3.select( progress.pie.vars.pieEl ).selectAll("svg")
          .data(data)
          .enter()
          .append("svg")
            .attr("width", 150)
            .attr("height", 150)
          .each(function(d) { this.currentAngles = d; }); // store the initial angles;

progress.pie.vars.path = progress.pie.vars.svg.selectAll("path")
          .data(function(d, i){ return pie(d) })
          .enter().append("path")
            .attr("fill", function(d, i) { return color(i); })
            .attr("transform", "translate(" + 75 + ", " + 75 + ")")
            .attr("d", arc);

注:ここではハードコードされたデータを使用しています。JSON を使用してレプリケートできますが、トランジションを機能させるために単純化したかったのです。

これによりsvgが作成され、ページにレンダリングされますが、他のデータセットを使用してパスを更新しようとすると問題が発生します。このような...

var data = [[60, 40], [10, 10, 10, 70], [30, 70], [25, 25, 25, 25], [30, 35, 35]];

progress.pie.vars.svg = progress.pie.vars.svg.selectAll("svg")
          .data(data);

progress.pie.vars.path = progress.pie.vars.path
          .data(function(d, i){ return pie(d) })
          .enter().append("path")
            .transition()
            .duration(5000);

d3 の一般的な更新パターンを調査しましたが、まだよくわかりません。

誰かが私の問題を解決する方法やコードを改善する方法を提案している場合は、大歓迎です:)

ありがとう