綁定只爲性能優化

新的數據點試想一下，我在我的代碼如下電話：綁定只爲性能優化

svg.selectAll("path") 
    .data(data, key) 
    .enter().append("path") 
    .attr("d", path);

代碼一段時間後，完全相同的調用時，只有data包含一些新的條目。如何將新數據條目綁定到新路徑而不重繪現有路徑？（即，與現有路徑關聯的數據元素不會改變）

這是一個性能優化：data包含10,000多個條目，每個調用添加或刪除的條目少於1％。正如你可能想象的那樣，繪製超過10,000條路徑的資源非常密集，需要幾秒鐘才能完成（在此期間整個頁面對用戶事件沒有響應）。

一種解決方案是構建舊數據和新數據之間差異的數組，並僅在新數據元素上使用enter()。但是，在提供第二個數據集時，舊的data變量在範圍內變得很棘手。我認爲D3必須以某種方式內部維護舊數據的表示，當然我們可以使用它。

類似地，刪除的數據元素必須發生相同的過程（每個調用將從data中刪除一些元素，並且必須從DOM中刪除相應路徑而不觸及所有其他路徑）。不過，我想我可以在第一部分給出解決方案時弄清楚這部分。

來源

2013-03-25 David Chouinard

使用enter/transition/exit join結構（http://bost.ocks.org/mike/join/）重繪所有現有路徑嗎？ – 2013-03-25 22:30:42

等等...在上面包含的代碼片段中，實際上只是繪製了新元素 - 「enter（）」返回的元素。這裏唯一涉及到任何舊元素的d3動作是'data（）'操作，它決定哪些元素是新的（即輸入）以及哪些元素被更新。所以這聽起來像它已經在做你想做的。沒有？ – meetamit 2013-03-25 22:37:02

我建議您在d3中閱讀object constancy和joins。

你舉不僅爲新的數據，基本上可以用selection.data(newDataArray, function(d){return d.id})，那麼，selection.enter()會給你所有新元素，給數據的新陣列的enter()功能selection.exit()所有刪除元素和selection將爲您提供新數據集中的所有元素（舊+新）。

Here也是一個不錯的簡短教程。

您可能還想看看關於d3.js中的數據的reference documentation。

來源

2013-03-25 22:36:21

啊，明白了。所以這非常簡單！謝謝。 – 2013-03-26 00:29:45

綁定只爲性能優化

回答

相關問題