D3力布局:如何维持节点之间给定的最小距离?

时间:2013-10-14 16:14:31

标签: javascript algorithm d3.js force-layout

我正在使用强制布局。通过在div元素内单击来创建新的d3节点。节点在点击时创建。节点是大小为50像素×50像素的矩形。创建节点后,我立即将其固定属性设置为true,以使其不会自行移动。我不是在叫force.drag。可以通过按住ctrl键并拖动节点来移动节点。可以通过将鼠标(不按住ctrl键)从一个节点拖动到另一个节点来创建边缘。

现在,我想添加以下功能。 任何两个节点之间的最近距离应该大于某个最小值。您可以假设最小距离的任何正值。我们假设100像素。当创建任何新节点太靠近现有节点时,节点应移动,以使任意两个节点之间的距离变得超过100个像素。类似地,当一个节点移动并且太靠近另一个节点时,节点也应该移动以保持最小100像素的距离。

没有条件在哪个节点上移动以及在哪个方向上移动。一种方法是检查坐标和距离,然后计算要移动的节点,多少,在哪个方向上并相应地执行代码。但是,d3中有更简单的方法吗?

1 个答案:

答案 0 :(得分:2)

考虑使用force.linkDistance()force.linkStrength()来实现这一目标。 linkDistance表示最小距离约束,linkStrength(在[0,1]范围内)决定了刚性'链接距离是,或模拟可以覆盖多少linkDistance。

force.linkDistance

force.linkStrength