Cytoscape.js的性能和布局

Question

Cytoscape.js的性能和布局

5

我正在测试Cytoscape.js的渲染性能。我的图包含大约5000个节点和5000个边缘，没有x,y位置，使用Cytoscape.js的自动布局。但是在渲染所有节点和边缘后使用euler布局扩展需要超过15秒，图页面的浏览器会卡一会儿或在下一个操作中响应缓慢。正如所说，Cytoscape.js受到浏览器性能的限制。我们从Java服务器客户端加载JSON数据，并使用for循环加载数据，然后使用layout.run()运行自动布局。如何处理大量数据以改善性能呢？

带有x，y位置的数据可以提高性能，对吗？但我们不知道如何在Java中循环x，y位置。您能给我展示吗？Cytoscape.js中有java插件可用于布局吗？

- yuanfang

你尝试过参考文档中的性能部分吗？https://github.com/cytoscape/cytoscape.js/blob/master/documentation/md/performance.md 添加一些优化措施可以极大地提高性能。我还没有尝试过5000个节点，所以我一定会关注这篇文章的。 - gunner_dev

是的，我尝试过它们。但是随着图形节点数量的增加，layout.run()所需的时间也会增加。您知道如何针对大数据“使用批处理进行一系列操作”吗？在此处注意到：[https://stackoverflow.com/questions/31364329/scalability-of-cytoscape-js] - yuanfang

瓶颈可能是布局。尝试更简单的布局。您可以检查fcose。 - canbax

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Konrad Höffner · Accepted Answer

Cytoscape.js无法处理实际的大数据（即千兆字节或更多），因为它在浏览器中运行。即使是像5000个节点和边这样的中等大小，Cytoscape.js的15秒运行时间也很正常。

问题在于JavaScript在图形布局等任务中速度较慢，因为现代CPU具有越来越多的核心，而JavaScript的并行化实现（Web Workers）对于具有许多短迭代步骤的算法来说开销太大，其中所有线程的结果必须被集成。此外，据我所知，在JavaScript中进行GPU计算更加困难。

这些问题都可能在未来得到解决，Cytoscape.js的开发人员Max Franz似乎非常活跃和支持，因此，如果JavaScript获得更好的并行化和GPU计算支持，我相信这将很快应用于Cytoscape.js中。

目前，您可以尝试一些解决方法：

- 图形总是相同的吗？那么您可以预先计算布局并将其作为预设布局加载。 - 图形至少不经常更改吗？那么您可以缓存布局，并仅在必要时重新计算。

我不知道您所说的“在Java中循环x，y位置”是什么意思，您是指在JavaScript库Cytoscape.js中加载预设布局吗？如果是这样，在此处进行了说明：http://js.cytoscape.org/#layouts/preset。具体来说，您可以像下面这样定义x和y坐标：

let options = {
  name: 'preset',
  positions: ... // map of (node id) => (position obj); or function(node){ return somPos; }
...

除了Cytoscape.js之外，还有一些图形可视化工具的功能要少得多，但速度更快。因此，如果您不需要这些功能，只想可视化一个简单的图形，可以尝试使用ngraph，在http://www.yasiv.com/graphs#Bai/rw5151上查看演示。