So currently I'm trying to create a force-directed graph of a couple thousand nodes and about 30k links in the graph. As you may guess, the simulation is very very slow. What I would like to do instead is to precompute all the positions for the nodes and just render a static (but interactive) graph. Is there a way to use d3.js to calculate a force directed graph without rendering it (making it much faster) and then just render the static graph from the pre-calculated values? My code is currently based off Mike Bostock's example.
4
votes
SVG is usually the slowest solution when it comes to interactivity and animation in the browser. Using Canvas (or if you wanted 3d canvas with WebGL) for animation might improve performance a bit. You have to roll your own (or use a library) for the object picking and dragging though.
- Louis Ricci
^Which is exactly what I dont want to do. I dont really need a a full simulation of my graph. I just need to visualize the nodes and links, and the clusters they form, so I chose a force directed graph. Also, I don't need to be able to drag the nodes either, I just need to be able to hover over each node and see some info about them. So I'm paying a high performance price on all the stuff I don't need and I'm sure there's a way to remove that but not sure how.
- leonsas
1 Answers
3
votes
The method d3 uses for force directed graph layout is the standard repulsive force and attractive force model, you can find the pseudo code on Wikipedia (http://en.wikipedia.org/wiki/Force-based_algorithms_%28graph_drawing%29#Pseudocode) or check out the d3 source itself (https://github.com/mbostock/d3/blob/master/src/layout/force.js).
That algorithm has an O(n^2) complexity per tick (or time slice) and it takes about n ticks to reach an equilibrium so O(n^3) for the whole layout process (http://www.ecs.umass.edu/ece/labs/vlsicad/ece665/presentations/Force-Directed-Adel.ppt). For thousands of nodes this isn't practical.
To try and answer your specific question, just use CSS, display: none on your SVG container element. Once the initial simulation "eventually" finishes you can grab the HTML source of the SVG elements and use that as your basis for the static but interactive representation. (once you have html of all the elements you'd just have to add the mouse hover event onto them to have them display their details.
