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

D3 force layout: How to maintain a given minimum distance between nodes?

本文关键字:距离 之间 节点 布局 何保持 D3      更新时间:2023-09-26

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

现在,我想添加以下功能。任何两个节点之间的最近距离应大于某个最小值。您可以假定最小距离为任何正值。让我们假设 100 像素。当创建的任何新节点离现有节点太近时,节点应移动,以便任意两个节点之间的距离超过 100 像素。同样,当一个节点移动并离另一个节点太近时,节点也应移动以保持至少 100 像素的距离。

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

考虑仅使用force.linkDistance()force.linkStrength()来实现此目的。 linkDistance 表示最小距离约束,linkStrength(在 [0, 1] 范围内)确定链接距离的"刚性"程度,或者模拟可以覆盖多少 linkDistance。

力.链接距离

力.链接强度