如何使用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數據綁定，它看起來像只處理添加新路徑的輸入大小寫（儘管您沒有像在原始餅中那樣分配d路徑屬性）。您需要爲新數據添加新弧線並更新更新數據的弧線。您可以通過保持更新選擇從輸入選擇單獨做到這一點：

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

新的節點加入到輸入選擇被默認添加到更新的選擇，這樣最後一行將在新，和existings進行操作。 （注意這不處理退出）。

你應該看看Mike Bostock的優秀教程Thinking With Joins。