如何替換d3強制布局中的節點？

Question

我正在使用d3.js強制布局圖來顯示js對象。 每個對象對應於圖中的節點，並且每個節點在DOM中由SVG <g>元素表示。

除了用新的更新對象替換節點對象外，我的一切工作正常。 當我嘗試這樣做時，d3似乎正在刪除舊的<g>及其內容，並添加一個舊的數據 。

理想情況下，我想讓d3只使用新數據更新該對象的現有元素。

演示： http ： //jsfiddle.net/d3query/xf66gxo8/1/

單擊更新按鈕應使用不同的數據替換最后一個節點。 如果我更新對象的屬性，這是有效的：

dataset[index].name = 'four';

但如果我直接替換該對象，則不會：

dataset[index] = { id: oldnode.id, name: 'four' };

Answer 1

首次將數據與選擇關聯時

var elems = ddisp.selectAll('g').data(dataset, function(d) { return d.id; });

您正在將JavaScript對象與SVG <g>元素相關聯。

該聲明

dataset[index].name = 'four';

更改現有對象的屬性。 因此，當您重新運行render D3可以獲取該新屬性。 它仍在讀取舊對象，但對象的name屬性已更改。

相反，當你執行語句時

dataset[index] = { id: oldnode.id, name: 'four' };

您正在通過創建新對象來更改數組中的元素，但SVG <g>元素仍與舊對象相關聯。 你正在打電話，這是真的

ddisp.selectAll('g').data(dataset, function(d) { return d.id; });

再次使用更新的數組，但您沒有更改id屬性（並且您告訴D3， id屬性決定了數據點的“唯一性”）。 因此，當D3到達數組中的“new”元素時，它會檢查id值，看到沒有任何變化（它仍然是2），因此，不會更新與該<g>元素關聯的對象。

相反，如果您響應更新按鈕

dataset[index] = { id: 4, name: 'four' };

那么你確實會看到節點被更新，因為通過改變id屬性，你會向D3發信號通知數組元素是新的。