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

【问题标题】：How to get Cytoscape to place separate node groups closer and avoid overlapping self edges如何让 Cytoscape 将单独的节点组放置得更近并避免重叠自身边缘
【发布时间】：2019-11-22 23:10:10
【问题描述】：

我之前曾使用 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 似乎根本不起作用，它只是挂起我的浏览器。

【问题讨论】：

标签： cytoscape.js

【解决方案1】：

其他的我不知道，但是 cose-bilkent 和 fcose 在计算过程中都不考虑自环边缘，布局后绘制自环边缘与 cytoscape.js 更相关。

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

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

【讨论】：

感谢您提供此信息，我必须更多地使用 fcose！顺便说一句，是否有调整自我链接的绘制方式，也许它可以更椭圆并且更小一点？而且，你知道欧拉应该工作吗？
可以通过播放“loop-direction”和“loop-sweep”属性来调整自循环边缘的绘制。这些属性的解释可以在here 找到。 Euler 似乎正在其演示中工作，并且其 github 存储库中没有关于问题的问题。顺便说一句，fcose 也有 packComponents 选项来打包断开的组件，但它需要将 cytoscape-layout-utlities 扩展注册到 cytoscape.js 实例。您可以查看 github 中的 fcose 演示文件以更好地了解此功能。
非常感谢您的提示 - 特别是提到 packComponents！我不会继续使用 cos-bilkent 和包装。仍然有随机的边缘交叉，但图表非常干净。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：