D3 forceX/forceY 和 forceCenter 的区别

Question

我有以下代码：

var simulation = d3v5.forceSimulation()
      .force('link', d3v5.forceLink().id(function (d) { return d.id; }))
      .force('charge', d3v5.forceManyBody())
      .force('center', d3v5.forceCenter(width / 2, height / 2))

这是一个示例 codePen（见第 57 行）： https://codepen.io/anon/pen/PdOqZK?editors=1010

最后一行设置了力的中心。当我拖动节点并设置此中心时，节点似乎从中心向外。但是当我有以下情况时：

var simulation = d3v5.forceSimulation()
      .force('link', d3v5.forceLink().id(function (d) { return d.id; }))
      .force('charge', d3v5.forceManyBody())
      .force('x', d3v5.forceX(width / 2))
      .force('y', d3v5.forceY(height / 2))

这是一个示例 codePen（见第 57 行）： https://codepen.io/anon/pen/gdXprR?editors=1010

它按预期工作。如果有人能解释发生了什么，那就太好了。

Answer 1

您的两个 JSFiddle 的行为都是预期的。

这里的问题是d3.forceCenter 和d3.forceX/Y 是不可可互换或相似的方法。 “居中”和“定位”是不一样的，它们的用途和效果有很大的不同。

如果您查看 API，您会看到 d3.forceCenter...

...均匀地平移节点，使得 所有 节点的平均位置（如果所有节点的权重相等，则为质心）位于给定位置 ⟨x,y⟩。 （强调我的）

因此，这里的重要概念是“质心”。例如，当您将一个节点移动到右侧时，其他节点将移动到左侧，因此质心停留在指定位置。这种行为的效果是，如果你将一个节点拖到 SVG 的边缘，其他节点会在对面消失。

另一方面，“定位”不会同时影响所有节点。正如 API 中关于 d3.forceX/Y 的声明，

...虽然这些力可用于定位单个节点...（强调我的）