Layout 同一页面上的d3 force布局的多个实例

我的目标是使用D3Force布局来显示共享相同节点的两个不同网络。例如，在四个人中，你可以定义一个社交网络和一个系谱网络；节点可能是相同的（人），但链接（关系）可能不同尽管创建了两个单独的力布局、两个单独的svg画布，并试图定义单独的变量，但节点共享x和y位置信息。下面是一个简单的示例，其中在一个网络上拖动节点会更改其在另一个网络中的位置：

---

下面，我发布了创建一个网络所调用的函数，创建另一个网络的代码非常相似，但在所有实例中使用不同的变量名。创建这两个网络的注释代码可以在中找到，用于定义变量的脚本可以在/driver/minimalScript.js中找到。我编写了一个工具，允许浏览生物，并排显示两个SVG面板。每个面板都包含一个由d3.js API绘制的力布局网络

我发现实现这一点的关键是为DOM中的每个元素指定一个唯一的名称，其中可能存在重复

在我的例子中，我使用了

\u left

和

\u right

来满足每个面板元素，其中元素分别位于左侧或右侧面板中。需要跟踪的工作很多，但是网络渲染器可以将其调用和事件定向到正确的元素和网络

就你而言：

.attr("id", function(d,i) {
      return ("idx" + i);
      })

---

您希望将

return

值替换为唯一寻址节点关联的网络的值。无论您是使用索引编号方案还是像我一样使用基于后缀的方法，诀窍是确保所有

id

名称都是唯一的。

Javascript因混淆状态是否共享而臭名昭著。您的最小示例不再可用，但当我遇到同样的问题时，我的结论是，我只是在需要完整克隆的地方制作浅拷贝。（我说的是D3作为输入的链接和节点。）

如您所发现的，如果没有真正的副本，结果行为将有点随机，这取决于D3代码是否选择“就地”修改任何共享数据。通常，出于性能原因，D3会尝试不创建副本

---

这就是json调用解决方案的工作原理：通过完全串接所有数据，实际上是在强制克隆操作。

您的站点的示例是一个很好的模仿示例，看起来很棒！但是，我无法通过更改ID来解决我的问题。我尝试过使用不同的ID，也尝试过不使用ID，在这两种情况下，显示器仍在互相更新。我已经检查了left（X）和right（Y）的名称是否在布局、节点、链接和svg画布的名称上有所不同。还有其他建议吗？我不知道这是否相关，但如果你拖动并保持一个网络足够长的时间，另一个网络将冷却/冻结，然后不再链接（显然）。我不知道还有什么可以工作。我知道，确保每个网络中的每个元素都是唯一的，这是实现这一目标的关键。如果有任何重复的

id

名称，则会发生故障。但愿我能帮上更多的忙！我注意到的另一件事（也许）提供了一个线索：经过一定的时间/消耗后，布局会将节点冻结在其当前位置。如果抓取左侧布局并四处移动，直到右侧冻结，则将无法再间接移动右侧布局。然后，如果抓取右侧布局，则可以使用它仅影响左侧，直到左侧冻结。对我来说，这意味着虽然布局的位置会受到影响，但冷却计时器不会受到该移动的影响。节点在两个图中移动，但只有一个记录了动态。我还没有发布实现这一点的代码，但我可以通过使用d3异步json调用d3.json（…）来加载数据来划分这两个布局。虽然这不是最好的解决方案，但这似乎是可行的。我仍然很好奇为什么我之前的简单示例（以及@Alex Reynolds的修复）不起作用……我正在尝试做与您相同的事情：同步同一页面上两个force布局的节点位置。由于Alex Reynolds的回复，我有两个force布局。但是，我不知道在哪里设置位置同步的挂钩。由于DBLaremore方法的链接不再起作用，有人知道从哪里开始，或者链接到另一个示例吗？

.attr("id", function(d,i) {
      return ("idx" + i);
      })