Javascript D3 forceX/forceY和forceCenter之间的差异

我有以下代码：

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))

下面是一个示例代码笔（参见第57行）：

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

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))

下面是一个示例代码笔（参见第57行）：

---

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

您的两个jsfiddle的行为都是预期的

这里的问题是

d3.forceCenter

和

d3.forceX/Y

是不能互换或类似的方法。“定心”和“定位”是不一样的，它们有非常不同的用途和效果

如果您查看API，您将看到

d3.forceCenter

…均匀平移节点，以便所有节点的平均位置（如果所有节点的重量相等，则为质心）位于给定位置⟨x、 y⟩. （强调矿山）

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

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

。。。虽然这些力可用于定位单个节点。。。（强调矿山）

---

看看我在这里的解释：@Gerardofurta我知道它给了你原力的中心，但它向外移动的原因是什么？只是因为我没有设定力x和y吗？不，是因为重心在同一位置，而不是单个节点。这就是为什么拖动一个节点会使其他节点向外移动。这更有意义，谢谢。我想知道什么用例会使用forceenter，我理解它现在做什么，但不确定它在哪里有用