如何使用d3.js更新餅圖

Question

我有兩個不同的數據集，我試圖用第一個數據集創建餅圖，然后偵聽事件並過渡到第二個數據集。

我可以使用此代碼從第一組數據成功創建餅圖

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常規更新模式，但我還不太了解。

如果有人對如何解決我的問題或改善我的代碼有任何建議，請多多關照:)

謝謝

Answer 1

由於progress.pie.vars.svg包含新添加的元素，因此不需要selectAll("svg") 。 這將是選擇任何svg在你的元素svg元素。 您應該能夠直接在所選內容上直接調用data 。

對於progress.pie.vars.path數據綁定，看起來您只在處理enter情況以添加新路徑（盡管您沒有像原始派那樣分配d path屬性）。 您需要為新數據添加新弧，並為更新數據更新弧。 您可以通過將更新選擇與輸入選擇分開來進行此操作：

progress.pie.vars.path = progress.pie.vars.path
    .data(function(d, i){ return pie(d) });

progress.pie.vars.path.enter().append("path");

progress.pie.vars.path.attr("d", arc);

添加到回車選擇中的新節點將隱式添加到更新選擇中，以便最后一行將在新的和現有的兩者上運行。 （請注意，這不處理退出）。

您應該查看Mike Bostock的出色教程“ Joining 思考” 。