如何使Cytoscape靠近放置单独的节点组并避免重叠自身边缘

2024-05-14 • 问答

我之前曾使用Springy生成力导向图。似乎有一种非常聪明的算法来避免节点或链接重叠，并且它还很少使用可用空间：

不幸的是，Springy使用jQuery，不适合我当前的项目，并且正在寻找一个很好的替代品。目前，我正在尝试Cytoscape。我尝试了几种布局，而Cose-Bilkent似乎是迄今为止最好的。但是，我也有一些问题：

在典型情况下，我将有4-16个节点和边。我正在寻找一种以美观，紧凑的形式显示它们的方法，并尽可能减少重叠的边缘。

设置：

    randomize: true,nodeRepulsion: 1000,idealEdgeLength: 30,gravity: 0.1

我还测试了以下布局：

Euler似乎根本不起作用，只是挂起了我的浏览器。

我不认识其他人，但是cose-bilkent和fcose在计算时都没有考虑自环边缘，在布局之后绘制自环边缘与cytoscape.js更相关。

这两种算法都不会为减少边缘交叉做出额外的努力，但是fcose通常在提供平面图的平面嵌入方面做得更好。

一种减少断开的组件之间距离的方法是在两种算法中都增加重力/减小重力范围。此外，在默认设置下，fcose有望比同等语言产生更紧凑的布局。

我在 cytoscape-layout-utilities 中尝试了 packComponents() 在一千个节点的集群图上，但它要么陷入无限循环，要么运行速度超慢（我在 3 小时后终止了进程）。最终得到了我自己的打包算法，它在 1 毫秒内完成了工作（golang，而不是 js）。

Euler 不错，速度也相对较快，不过有点小问题。当 randomize 选项设置为 false 时挂起。

Cise 生成出色的布局，但在我的 i7 9700 上该过程需要半小时。

将 Euler 设置为 randomize 选项为 true 将解决浏览器无限加载的问题。