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

Question

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

网站上有使用可乐与cytoscape.js的is an example，但他们没有这种不重叠的功能。

我尝试了无限：true选项，但它似乎没有按预期工作。我想知道如何用cytoscape.js和cola实现这一目标。

感谢。

Answer 1

首次使用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 ......）

Answer 2

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

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