與d3.svg.path綁定的鍵綁定（）

Question

我有一個簡單的d3.js時間序列圖被繪製爲SVG圈。圓是鍵綁定，以便當我從數組末尾刪除數據時，從右側的圓被刪除，當我從數組的開始刪除項目時，從左邊的圓被刪除exit.remove()。

var circles = svg.selectAll('circle') 
    .data(data, function(d){return d.key}) 

現在，我想對SVG路徑做同樣的事情。 有沒有辦法將鍵綁定應用到SVG路徑？

Answer 1

我有一個類似的問題，當我想在d3中用SVG路徑進行實時更新的情節。 d3對整個數據序列只使用一個路徑元素，即對於給定的數組，有一個繪製的路徑可能會非常長，具體取決於您的數據。這意味着d3不能通過刪除DOM元素（如圓圈）來簡單地刪除綁定的數據元素。它將不得不修改像<path d="M0,0L1,0L2,1L3,2">到<path d="M1,0L2,1L3,2">。不幸的是，我認爲d3不具備這種功能（儘管您可以自己編寫代碼！您需要覆蓋d3.interpolateString並編寫一些自定義插入符號來注意掉落的點。）

這也意味着您不能使用D3的數據選擇器，因爲數據適用於具有多個元素的組，如svg圈。您將不得不使用select("#yoursvgpath").datum(data)，它將設置單個元素的數據，其中data是您的數據數組。

因爲我知道我的代碼運行的硬件速度很快（桌面i7，ssd等等），所以每次添加或刪除元素時我都會重新繪製路徑。即使如此，Firefox的速度還是很慢（但在Chrome中表現很好），特別是當點數超過10,000時。要重繪，只需再次調用基準，然後重新應用座標變換器（如select("#yoursvgpath").attr("d", line)，其中行是路徑數據變換器）。我最終只重繪了每5000個數據元素，以便不會不斷重新計算路徑。

如果有任何一個令人困惑，我肯定會閱讀製作d3中的折線圖，它與基於點的圖表相比有點不同（不太直觀）。我還會看看https://gist.github.com/mbostock/1642874和http://bost.ocks.org/mike/selection/，瞭解更多關於d3選擇和折線圖的信息。