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

这是示例代码笔（请参见第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))

这是示例代码笔（请参见第57行）： https://codepen.io/anon/pen/gdXprR?editors=1010

它按预期工作。如果有人可以解释正在发生的事情，那就太好了。

Answer 1

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

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

如果看一下API，您会看到d3.forceCenter ...

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

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

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

...这些力可以用来定位单个节点 ...（强调我的位置）

D3 forceX / forceY和forceCenter之间的区别

1 个答案: