如何更新D3餅圖

對不起，我意識到人們對如何做到這一點噸的材料，我已經受夠了一些教程，看着雖然一些官方的GIST（像this one），但我仍然無法弄清楚。

正如你將在我的jsfiddle中看到的那樣，圖表用第一組數據呈現 - 但是當我單擊更新按鈕時圖表根本不會改變。

update方法確實火，路徑‘d’值是更新（通過觀看在Firebug這些元素作爲確認） - 它只是路徑新‘d’的價值觀是相同的舊的。

我需要在這裏做些什麼改變？幾個小時以來，我一直在對着這堵牆猛撞我的頭，嘗試文檔和教程所說的每一個不同的東西 - 我無法弄清楚。

謝謝！

而且，這裏的更新方法 - 有人可能會發現問題，甚至不必看小提琴...

function updateData(dataset){ 
    //console.info(dataset); 

    // Set Data 
    var allSlices = slicesGroup 
      .selectAll(".slice") 
       .data(pie(dataset)); 

    // Create New Slices 
    var newSlices = allSlices 
      .enter() 
      .append("g") 
       .attr("class", "slice"); 

    newSlices 
     .append("g") 
      .attr("class", "outer") 
      .append("path"); 

    newSlices 
     .append("g") 
      .attr("class", "inner") 
      .append("path"); 

    // Update All Slices 
    allSlices 
     .selectAll(".outer") 
      .selectAll("path") 
       .attr("d", outerArc); 

    allSlices 
     .selectAll(".inner") 
      .selectAll("path") 
       .attr("d", innerArc); 

    //console.log(newSlices); 
    //console.log(allSlices); 

    // Remove Old Slices 
    allSlices.exit().remove(); 
};

來源

2014-03-02 encoder

該問題與您的嵌套數據結構有關。您的新數據已成功加入到您的「切片」元素中，但不會與您的「內部」和「外部」<g>元素和<path>元素本身結合。

修復很簡單，但非直觀。替換allSlices.selectAll(".inner").selectAll("path")與allSlices.select(".inner").select("path")和「外」組相同。

http://jsfiddle.net/z25SU/1/

隨着selection.select()the selected element inherits the updated data from the parent，與在.selectAll()任何現有的數據不被改變。這些重要的區別在教程中並不經常強調。然而，它是有道理的 - 如果你選擇了selectAll許多元素，他們應該各自擁有自己的數據，讓他們都從父級收到相同的值是沒有意義的。

來源

2014-03-03 02:21:17 AmeliaBR

Arg！我知道這將是簡單的：P謝謝你的答案，尤其是解釋！ – encoder

我已經改變了輸入，更新代碼。這裏是FIDDLE。

您可以在update函數中使用data2或data3。

來源

2014-03-03 00:02:37 FernOfTheAndes

這只是增加了新的''元素的頂部......它可能會變得非常混亂，多個更新！ – AmeliaBR

是的，好點...我看到所有生成的svg元素，並不熟悉餅圖佈局，也許這是它的一個神器。回到繪圖板......但對我來說太遲了...請隨時用新的答案清理我的混亂，如果你有能量......謝謝。 – FernOfTheAndes

@encoder ...同意。 – FernOfTheAndes

如何更新D3餅圖

回答

相關問題