使用jQuery動畫改變arc/pie中的幾個D3.js圖形

我與許多D3一起嘗試進入下一個水平。我有一個與我想要的圖形接近的圖形，但我無法弄清楚如何爲變化設置動畫。有很多事件，並將不同的部分分成不同的功能。如果以下情況發生，我給他們打電話：使用jQuery動畫改變arc/pie中的幾個D3.js圖形

if ($("#chart1Pie").is(":checked")) { 
    updateOne(); 
    } else if ($("#chart2Pie").is(":checked")) { 
     updateTwo(); 
    };

難道我有不同的功能不同部分嗎？完整的代碼在jsfiddle上。

http://jsfiddle.net/rocky1616/ghfqmygh/

來源

2014-09-20 jamesRH

您正在使用D3絕對不正確。你有一張圖，但有兩組數據 - 對於史密斯和瓊斯。您不需要使用jQuery刪除#chart中的內容，然後從頭開始重建整個圖。一般來說，如果你想刪除和添加元素，你應該使用D3方法.enter（）和.exit（）。

在你的情況下，你不要需要刪除任何東西。所有你需要做的更新是重新計算你的路徑屬性「d」。

檢查這些示例：one,two。

來源

2014-09-20 04:00:05 dehumanizer

我有這樣的感覺。我遇到的實際問題是如何編寫更改功能。您是否會根據您提供的示例提出類似的建議？ 'code'd3.selectAll（「input」）。on（「change」，function change（）{ var value = this.value ===「pie」？function（d）{return d.jones;} ：函數（d）{return d.smith;};'代碼' – jamesRH 2014-09-20 05:05:22

是的，你是對的，基本上，就輸入變化而言，你只需要弄清楚如何過濾數據 - 瓊斯vs史密斯，然後通過Jones數據集或Smith數據集設置爲data（）函數，所以數據已經改變了，現在我們需要在圖中反映出來，圖已經建好了，所以我們只需要根據新的數據重新計算每一個切片，使用補間動畫就可以了。 – dehumanizer 2014-09-20 20:24:55

如果它適合你，你能接受答案嗎？ – dehumanizer 2014-09-22 17:23:38

使用jQuery動畫改變arc/pie中的幾個D3.js圖形

回答

相關問題