首页 > 解决方案 > Cytoscape.js 和 cose-bilkent:防止节点和边缘重叠的最佳参数

问题描述

我需要用 Cytoscape.js 绘制相对较小(最多 20 个节点)的网络图。大多数时候图表看起来不错,但有时会出现问题。有时节点位置太近或存在其他问题。下面举几个例子:

示例 1

示例 2

通常一些边也会重叠,即使布置节点以不发生重叠应该不难。

我一直在试验这些参数,但是由于变量太多,很难找到最佳组合。

我正在使用 ATM 的参数:

cy.layout({
  name: "cose-bilkent",
  animate: false,
  idealEdgeLength: 30,
  quality: "proof",
  randomize: false,
  nodeDimensionsIncludeLabels: true,
  nodeRepulsion: 7000,
  edgeElasticity: 0.45,
  nestingFactor: 0.1,
  numIter: 30000,
  gravity: 0.25,
  tile: true
}).run();

我应该调整什么?

编辑:

Stephan 的几个示例图像(请参阅评论):

演示 1 演示 2

标签: cytoscape.js

解决方案


cose-bilkent 和 fcose 都没有防止边缘重叠的机制。在力导向布局算法中实际上很难实现。另一方面,这两种算法尽量避免节点重叠,但这种情况很少发生,尤其是在图密集的情况下。

减少重叠机会的一种方法是增加idealEdgeLength两种算法中的参数,这将使节点更加独立。randomize: true如果没有理由阻止从头开始应用布局,也可以使用。但如果您的图形是平面(或接近平面),我建议您使用 fcose 算法,因为 fcose 通常在提供平面图的平面嵌入方面做得更好。


推荐阅读