force-layout - 使用多个连接组件时，D3 强制 v3 和 v4 之间的布局差异

Question

MWE

我试图用两个版本创建相同的图表，这里是 Bl.ocks:

• v3
• v4

这些例子改编自one官方例子。

问题

当有多个连通分量时，就会出现差异。在版本 4 中，有两件事对我来说特别不起作用:

1. 拖动一个连接的组件会使其他组件以一种非常非物理的方式围绕(我猜)力中心疯狂平移；

2. 在鼠标按下时(即使没有实际移动)其他连接的组件无限期地移动，最终离开屏幕。

简而言之，第 3 版中的图牢不可破，无论您如何处理节点，它们最终都会回到稳定的位置。

如何修复这两种行为，使模拟更类似于版本 3？

Answer 1

您不需要 d3.forceCenter。如果您查看 API :

The centering force translates nodes uniformly so that the mean position of all nodes (the center of mass if all nodes have equal weight) is at the given position ⟨x,y⟩

这意味着，当您将一个节点移离中心时，其他节点将向相反方向移动，以补偿移动，因此质心保持在同一位置。

相反，使用 forceX 和 forceY:

The x- and y-positioning forces push nodes towards a desired position along the given dimension with a configurable strength.

所以，这是模拟:

const simulation = d3.forceSimulation()
     .force('link', d3.forceLink().distance(200))
     .force('charge', d3.forceManyBody())
     .force('centerX', d3.forceX(width / 2))
     .force('centerY', d3.forceY(height / 2));

这是一个更新的 fiddle :https://jsfiddle.net/ahdbLL8a/