有界静态力布局 - 有帮助吗?
我们如何创建手动调用 simulation.tick() 的有界静态力布局?
在D3js documentation ,我们看到手动运行 sim 时没有调度“tick”事件。通常可以对每个刻度事件的 x 和 y 值施加一个界限(参见 bounded force layout )。因此,这个问题的重点是如何让节点的 x 和 y 坐标遵守模拟每个刻度的边界。
举个例子,我们可以在这个 block 上的什么地方设置边界,以便节点的 x 和 y 值保持在红色框内?
失败 #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 .
关于javascript - D3js v5 中的有界静态力布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55502511/