了解d3.js強制布局的更新過程

Question

為了安靜一點時間，我正在嘗試更新我的d3.js力布局圖。 可悲的是，我能找到的每一個提示都會導致這個例子 。 我不完全理解它，現在對這個過程的不同部分有疑問。

setTimeout(function() {
  var a = {id: "a"}, b = {id: "b"}, c = {id: "c"};
  nodes.push(a, b, c);
  links.push({source: a, target: b}, {source: a, target: c}, {source: b, target: c});
  start();
}, 0);

假設setTimeout函數只是在那里提供一些動作，中間有幾秒鍾：

問1：我可以基本上刪除setTimeout()並將其寫為function initializeGraph(){/*do stuff*/}嗎？
問題2： nodes.push()和links.push()只將這些元素推送到node和link數組，但是圖中沒有進行任何更改嗎？

Answer 1

1）是問題1你可以這樣做

在這里工作代碼

2）D3意味着數據驅動文檔。 因此，當您更改數據時，DOM會更新。 因此，為什么要更新的原因nodes持有該節點的數據。 節點（ var node = svg.selectAll(".node"), ）保存與node相關的DOM。

Answer 2

Q1。 您可以，但它不會在設定的時間發生，您鏈接到的示例設置為對數據進行3次更改，因此布局以3秒的間隔進行，這樣看起來很明顯發生在觀看演示的人身上發生了什么

考慮通過超時功能初始化d3布局或者重命名它可能是錯誤的。 力圖聲明是我頭腦中的初始化。 再次在完整示例中，更新/啟動函數獲取數據並將其綁定到dom元素，無論是第一次運行還是第100次它是相同的代碼，只是在第一種情況下數據連接將生成新元素只能通過.enter（）限定符。

Q2。 我發現d3起初很難，因為它使用相同/接近的名稱來表示不同的東西。

在鏈接到的完整示例中，nodes是一個傳遞給單獨的force.nodes（）函數的數組，node是連接到force.nodes（）時生成的dom元素的選擇（force.nodes（）可能會返回首先提到的節點數組）

更改發生在啟動此數據連接的啟動函數中，並根據需要添加/更新/刪除dom元素。

Answer 3

1：是的，超時不必存在，您可以將其附加到按鈕單擊。

2：是的，它們只被推送到那些數組，只有在調用update時才會更新布局，即使用新數據運行強制圖的初始化。 我剛剛談到這個可能有助於你理解的問題：

https://stackoverflow.com/users/3382204/cyril