Cytoscape.js 的性能和布局

Question

我正在测试 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 插件？

Answer 1

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

问题在于 JavaScript 在图形布局等任务中速度较慢，因为现代 CPU 拥有越来越多的内核，并且 JavaScript 的并行性实现(网络 worker )对于具有许多短迭代步骤的算法有太多开销，其中所有线程的结果必须集成。另外，据我所知，GPU 计算在 JavaScript 中更难做。

这两个问题都可能在 future 得到解决，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 的演示.