Question

我需要做一些图形布局绘图，并且一直在考虑使用类似Spring布局算法的实现here并讨论here

但是我的节点都有宽度和高度（是实体图）。任何人都可以解释我如何将其纳入等式中吗？

Answer 1

以Graph JavaScript Framework为起点，您可以执行以下操作。我假设课程Node已按属性width和height进行了扩展。然后，在函数layoutRepulsive中，必须更改用于计算节点距离的表达式以尊重这些大小：

var dx = Math.max(0, Math.abs(node2.layoutPosX - node1.layoutPosX) - 0.5*(node2.width+node1.width));
var dy = Math.max(0, Math.abs(node2.layoutPosY - node1.layoutPosY) - 0.5*(node2.height+node1.height));

最大函数强制0作为距离的最低可能值，即使它们的边界框重叠也是如此。

Answer 2

查看您所采用的第一个链接，有第240行：

var repulsiveForce = this.k * this.k / d;

代表令人厌恶的潜力（即物理学）。数字越大，几何状态越不可能。 d是两个节点之间的距离，this.k是弹簧刚度。对于距离d = 0，这种潜力变得无限。

您希望将此潜力转换为特定长度（框的大小），因此请将d替换为d - length。这意味着，排斥力在距离length处变为无限。仍然存在问题，那就是排斥力随着距离的减小而减小，然后小于length，这必须由一些条件覆盖：

if (d + 0.0001 < length) repulsiveForce = bigbigNumber;

我添加0.0001以使排斥力永远不会变得无限，但只有很大，因为计算机不能很好地处理无限。

Spring图算法w节点大小

2 个答案: