Cytoscape.js的性能和布局 [英] Performance and layouts of Cytoscape.js

问题描述

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

I'm testing the rendering performance of Cytoscape.js.

我的图形使用Cytoscape.js的自动布局，包含大约5000个节点和5000个没有x，y位置的边。但是在渲染所有节点和边缘之后，使用欧拉布局扩展需要15秒钟以上，图页面的浏览器将被卡住一段时间或在下一个操作中响应缓慢。据说，Cytoscape.js受浏览器性能的限制。我们从Java服务器客户端加载json数据，并使用for循环加载数据，然后使用layout.run（）运行自动布局。

My graph contains about 5000 nodes and 5000 edges without x, y positions, using automatic layout of Cytoscape.js. But it takes more than 15 seconds with euler layout extension after rendering all nodes and edges, the brower of the graph page will get stuck for a while or response slowly in the next operation. As it was said, the Cytoscape.js is limited by the performance of browsers. We load json data from java server client, and load datas with for loop, then use layout.run() to run auto layout. How to improve the performance with big data?

具有x，y头寸的数据将改善性能，对吗？但是我们不知道如何在Java中循环x，y位置。能给我看看么？ Cytoscape.js中的布局是否有Java插件？

Datas with x,y positions will improve the performance, right? But we don't know how to circulate the x,y positions in Java. Can you show me? Is there java-plugin for the layouts in Cytoscape.js?

推荐答案

Cytoscape.js不可能与实际的大数据（即terrabyte或更多）一起使用，因为它在浏览器中运行。即使对于中等大小的节点（如5000个节点和边），对于Cytoscape.js来说15秒钟听起来也是正常的。

Cytoscape.js is impossible to be used with actual big data (i.e. terrabytes or more) because it runs in the browser. Even for medium sizes like your 5000 nodes and edges, 15 seconds sounds normal for Cytoscape.js.

问题是JavaScript在图形布局等任务中的运行速度较慢，因为现代CPU具有越来越多的内核，并且JavaScript的并行性实现（网络工作者）对于迭代次数很多且必须整合所有线程结果的算法而言，开销太大。而且，据我所知，使用JavaScript很难进行GPU计算。

The problem is that JavaScript is slower in tasks like graph layouting because modern CPUs have more and more cores and JavaScript's parallelism implementation (web workers) have too much overhead for algorithms with many short iteration steps where the result of all threads has to be integrated. Also, as far as I know, GPU computing is harder to do in JavaScript.

这两种问题都可能在将来解决，而Cytoscape.js的开发者可能会解决这些问题， Max Franz似乎非常活跃和支持，因此，如果JavaScript能够获得更好的并行化和GPU计算支持，我肯定会很快进入Cytoscape.js。

Both of those problems may be addressed in the future and the developer of Cytoscape.js, Max Franz, seems to be extremely active and supportive, so if JavaScript ever gets better parallelization and GPU computing support, I am positive this will find its way into Cytoscape.js shortly.

现在，您可以尝试一些解决方法：

For now you could try some workarounds:

• 图形是否始终相同？然后，您可以预先计算布局并将其作为预设布局加载。


• 该图是否至少不经常更改？然后，您可以缓存布局并仅在必要时重新计算。

我不知道您的意思是循环x， y在Java中的位置，您是说在JavaScript（！）库Cytoscape.js中加载预设布局吗？如果是这样，请在此处进行解释： http://js.cytoscape.org/#layouts/preset 。具体来说，您可以定义x和y坐标，例如：

I don't know what you mean by "circulate the x,y positions in Java", do you mean "load a preset layout in the JavaScript(!) library Cytoscape.js"? If so, that is explained here: http://js.cytoscape.org/#layouts/preset. Specifically, you define the x and y coordinates like:

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 。

There are also graph visualizations that have way less features than Cytoscape.js but are faster, so if you don't need any of the features and just want to visualize a simple graph, you may try ngraph, see a demo at http://www.yasiv.com/graphs#Bai/rw5151.

这篇关于Cytoscape.js的性能和布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！