问题
I'm testing the rendering performance of Cytoscape.js.
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?
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?
回答1:
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.
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.
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:
- Is the graph always the same? Then you could precalculate the layout and load it as a preset layout.
- Does the graph at least change infrequently? Then you can cache the layout and only recalculate it if necessary.
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; }
...
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.
来源：https://stackoverflow.com/questions/50344455/performance-and-layouts-of-cytoscape-js