Javascript 了解d3.js force布局的更新过程

现在我正在尝试更新我的d3.js force布局图。可悲的是，我能找到的每一个暗示都导致了我的失败。我不完全理解这个过程，现在对这个过程的不同部分提出了问题。

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（）

并将其写成

函数initializeGraph（）{/*do stuff*/}

---

问题2：

节点。push（）

和

链接。push（）

只将这些元素推送到

节点

&

链接

数组，但还没有对图形进行任何更改？

1：是的，超时不一定存在，您可以将其附加到按钮单击中

2：是的，它们只会被推送到那些数组，布局只会在调用update时更新，即使用新数据运行力图的初始化。我刚才问了一个问题，这可能有助于你理解：

是的问题1你可以这样做

工作代码

2） D3表示数据驱动文档。因此，当您更改数据时，DOM会得到更新。 因此，您正在更新保存节点数据的

节点

。

---

节点（

var node=svg.selectAll（“.node”），

）持有与

节点相关的DOM。
Q1。您可以，但它不会在设定的时间发生，您链接到的示例设置为以3秒的间隔对数据和布局进行3次更改，这样就可以清楚地看到任何观看演示的人都会发生什么

考虑通过超时函数初始化d3布局或重命名它可能是错误的。力图声明是我头脑中的初始化。在完整的示例中，update/start函数获取数据并将其绑定到dom元素，无论是第一次运行还是第100次使用相同的代码，只是在第一种情况下，数据联接将仅通过.enter（）限定符生成新元素

问题2。
起初我发现d3很难，因为它对不同的事物使用相同/相近的名称

在您链接到的完整示例中，节点是传递给单独的force.nodes（）函数的数组，而节点是连接到force.nodes（）时所选择的dom元素（force.nodes（）可能会返回前面提到的节点数组）

在start函数中会发生更改，在该函数中会发生此数据联接，并且会根据需要添加/更新/删除dom元素