Cytoscape.js 的性能和布局

Question

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

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

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

Answer 1

Cytoscape.js 不可能用于实际的大数据（即太字节或更多），因为它在浏览器中运行。即使对于像 5000 个节点和边这样的中等大小，15 秒对于 Cytoscape.js 来说听起来很正常。

问题在于，JavaScript 在图形布局等任务中速度较慢，因为现代 CPU 具有越来越多的内核，并且 JavaScript 的并行实现（Web Worker）对于具有许多短迭代步骤（必须集成所有线程的结果）的算法来说有太多开销。另外，据我所知，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:// ngraph的演示/www.yasiv.com/graphs#Bai/rw5151。