D3js v5 中的有界静态力布局

Question

有界静态力布局 - 求助？

我们如何创建 bounded 静态力布局，其中 simulation.tick() 是手动调用的？

在D3js documentation, we see that the "tick" event isn't dispatched when manually running the sim. Typically a bound could be imposed on the x & y values for each tick event (see this bounded force layout)。因此，这个问题的重点是如何让节点的 x 和 y 坐标遵守模拟每个刻度的边界。

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

失败 #1

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

代码

全部code for these examples is available on Observable。

Answer 1

Fil 调整了我的失败 #1 以创建以下解决方案：

Code for this solution is on Observable。

Answer 2

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

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

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

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

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

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

这是更新后的 notebook。