javascript - D3js v5 中的有界静态力布局

Question

有界静态力布局 - 有帮助吗？

我们如何创建手动调用 simulation.tick() 的有界静态力布局？

在D3js documentation ，我们看到手动运行 sim 时没有调度“tick”事件。通常可以对每个刻度事件的 x 和 y 值施加一个界限(参见 bounded force layout )。因此，这个问题的重点是如何让节点的 x 和 y 坐标遵守模拟每个刻度的边界。

举个例子，我们可以在这个 block 上的什么地方设置边界，以便节点的 x 和 y 值保持在红色框内？

失败 #1

我尝试创建一个边界框力函数。还不确定这里发生了什么。

代码

所有 code for these examples is available on Observable .

Answer 1

您的代码的问题不是缺少事件，而是模拟力的错误设置。原始示例是使用定位力 d3.forceX 和 d3.forceY 的默认值为 0 构建的。这使所有计算都以原点为中心。通过将 g 元素转换为 width/2 和 height/2，整个 shebang 以视口(viewport)为中心。由于您注释掉了翻译，因此这种居中不再起作用，将您的节点模糊到上边界和左边界。

这可以通过正确配置定位力轻松解决:

.force("x", d3.forceX(d3.mean(xExtent)))
.force("y", d3.forceY(d3.mean(yExtent)))

这会将布局的中心置于边界矩形的中心。

虽然这已经有效，但您可能想要调低排斥力，因为排斥力太强，迫使大多数节点位于外边界。将该值减半会立即产生视觉上令人愉悦的结果。

.force("charge", d3.forceManyBody().strength(-40))

这是更新的 notebook .