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不可能与实际的大数据(即Terra字节或更多数据)一起使用，因为它在浏览器中运行。即使对于5000个节点和边缘这样的中等大小的节点，15秒对于Cytoscape.js来说也是正常的。

问题是，JavaScript在像图形布局这样的任务中速度较慢，因为现代CPU具有越来越多的核心，而JavaScript的并行实现( workers)对于需要集成所有线程的结果的许多短迭代步骤的算法来说，开销太大。而且，据我所知，GPU计算在JavaScript中更难实现。

这两个问题都可能在未来得到解决，Cytoscape.js的开发人员Max似乎非常积极和支持，所以如果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少得多，但速度更快，所以如果您不需要任何特性，只想可视化一个简单的图形，您可以尝试N图，在http://www.yasiv.com/graphs#Bai/rw5151上看一个演示。