Javascript D3js v5中的有界静力布局 有界静力布局-帮助？

如何创建一个手动调用simulation.tick（）的有界静态力布局

在中，我们看到手动运行sim卡时未调度“tick”事件。通常，可以对每个勾号事件的x&y值施加一个界限（参见此）。因此，这个问题的重点是如何使节点的x&y坐标与模拟的每个刻度上的边界相一致

例如，我们可以在该块的何处放置边界，以便节点的x&y值保持在红色框内

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

代码 所有的

调整我的失败#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))

---

以下是更新的。

失败是由于.force（“x”，d3.forceX（））和.force（“y”，d3.forceY（））将所有内容拉到[0,0]的事实。