D3js v5 中的有界静态力布局

Question

有界静态力布局 - 帮助？

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

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

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

失败 #1

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

代码

所有code for these examples is available on Observable。

Answer 1

您的代码的问题不是缺少事件，而是您的模拟力设置错误。原始示例是使用定位力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。

Answer 2

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

Code for this solution is on Observable。