CODEWITHSUNDEEP
javascriptperformanced3.jsforce-layout
leonsas
leonsas

Reputation: 4898

Static D3 Force-Directed Graph performance

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.

Upvotes: 4

Views: 2501

Answers (1)

Louis Ricci
Louis Ricci

Reputation: 21086

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.

Upvotes: 3

Related Questions