如何让 Cytoscape 将单独的节点组放置得更近并避免自我边缘重叠

Question

我之前使用过 Springy 来生成力导向图。它似乎有一个非常智能的算法来避免重叠节点或链接，并且它也有节制地使用可用的space：

http://getspringy.com/demo.html

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

• 指向自己的链接绘制在其他边缘之上，这使得它们难以阅读
• 断开连接的节点组有时彼此距离很远
• 即使节点和边的数量很少（~15），边也经常重叠。

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

设置：

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

我还测试了以下布局：

• Klay：很多重叠的边缘，有时边缘很长
• 可乐：也有很多重叠
• Fcose：生成非常宽的图形

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

Answer 1

其他的我不知道，但是cose-bilkent和fcose在计算时都没有考虑自环边，layout后绘制自环边与cytoscape.js.

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

减少断开组件之间距离的一种方法是在两种算法中增加 gravity/decrease gravityRange。此外，在默认设置下，fcose 预计会生成比 cose-bilkent 更紧凑的布局。

Answer 2

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

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

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

Answer 3

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