Cytoscape 的强制定向 Cola 布局类似于 Cola 示例

Question

我正在使用 cytoscape.js 和 cola 扩展，我有兴趣创建一个布局 similar to this example。

网站上有 is an example 将可乐与 cytoscape.js 一起使用，但它们没有这种非重叠功能。

我尝试了 infinite:true 选项，但它似乎没有按预期工作。我想知道 cytoscape.js 和可乐是如何实现的。

谢谢。

Answer 1

避免重叠是 Cola 的内置功能。除非您指定使重叠避免成为不可能的特定选项，否则 Cola 将在节点不重叠的地方生成结果。

您可以使用 nodeSpacing 在节点周围指定额外的 space。如演示所示，增加该值会使节点更多 spaced：http://js.cytoscape.org/demos/2ebdc40f1c2540de6cf0/

Answer 2

使用您第一次尝试的 infinite: true 参数。您还需要 fit: false 参数以便能够缩放和平移。

例如：

var cy = cytoscape({
    container: $('#cy'),
    elements: /*...*/,
    layout: {
        name: 'cola',
        infinite: true,
        fit: false
    }
});

我在这里做了一个工作示例：http://codepen.io/anon/pen/EWEOKw（你需要在 HTTP 中加载：我没有找到可乐的 HTTPS CDN...）

Cytoscape 的强制定向 Cola 布局类似于 Cola 示例

Force directed Cola layout with Cytoscape similar to Cola example

javascript

cytoscape.js

webcola