Cytoscape.js 的性能和布局答案

【问题标题】：Performance and layouts of Cytoscape.jsCytoscape.js 的性能和布局
【发布时间】：2023-03-08 23:16:01
【问题描述】：

我正在测试 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() 会花费更多的时间。你知道如何对大数据“使用批处理进行一系列操作”吗？通知于：[stackoverflow.com/questions/31364329/…
瓶颈可能是布局。尝试更简单的。你可以检查 fcose

标签： performance cytoscape.js

【解决方案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。

【讨论】：