cytoscape.js - 如何让 Cytoscape 将单独的节点组放置得更近并避免 self 边缘重叠

Question

我之前曾使用 Springy 生成力导向图。它似乎有一个非常智能的算法来避免重叠节点或链接，而且它还节约地使用可用空间:

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 在计算时都没有考虑自循环边缘，在布局后绘制自循环边缘与 cytoscape.js 更相关。

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

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