Cytoscape.js 的性能和布局

Posted

技术标签:

【中文标题】Cytoscape.js 的性能和布局【英文标题】:Performance and layouts of Cytoscape.js 【发布时间】:2018-05-15 07:20:43 【问题描述】:

我正在测试 Cytoscape.js 的渲染性能。

我的图表包含大约 5000 个节点和 5000 个没有 x、y 位置的边,使用 Cytoscape.js 的自动布局。但是使用欧拉布局扩展渲染所有节点和边后需要15秒以上,图形页面的浏览器会在接下来的操作中卡住一段时间或响应缓慢。如前所述,Cytoscape.js 受到浏览器性能的限制。我们从 java 服务器客户端加载 json 数据,并使用 for 循环加载数据,然后使用 layout.run() 运行自动布局。如何利用大数据提高性能?

x,y 位置的数据会提高性能,对吧?但是我们不知道如何在 Java 中循环 x,y 位置。能给我看看么? Cytoscape.js 中的布局是否有 java 插件?

【问题讨论】:

您是否尝试过参考文档的性能部分? github.com/cytoscape/cytoscape.js/blob/master/documentation/md/… 添加其中一些优化也极大地提高了我的性能。 5000个节点我还没试过,所以我肯定会关注这篇文章 是的,我试过了。但是随着图形节点的增加,layout.run() 会花费更多的时间。你知道如何对大数据“使用批处理进行一系列操作”吗?通知于:[***.com/questions/31364329/… 瓶颈可能是布局。尝试更简单的。你可以检查 fcose 【参考方案1】:

Cytoscape.js 不可能用于实际的大数据(即 TB 或更多),因为它在浏览器中运行。即使对于像 5000 个节点和边缘这样的中等大小,15 秒对于 Cytoscape.js 来说也是正常的。

问题在于 javascript 在诸如图形布局之类的任务中速度较慢,因为现代 CPU 具有越来越多的内核,并且 JavaScript 的并行实现(网络工作者)对于具有许多短迭代步骤的算法有太多的开销,其中所有线程的结果必须被整合。此外,据我所知,GPU 计算在 JavaScript 中更难完成。

这两个问题都可能在未来得到解决,而且 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。

【讨论】:

以上是关于Cytoscape.js 的性能和布局的主要内容,如果未能解决你的问题,请参考以下文章

带有固定节点的 Javascript cytoscape.js 自动布局

力导向图布局的性能和复杂性?

D3.js 和 Cytoscape.js 有啥区别? [关闭]

cytoscape.js 图,仅显示/绘制少数节点和边缘

Cytoscape.js 中节点和边的内联编辑器

Android性能优化之布局优化