D3: Make Static Oriented Graph

Question

I would like to visualize a 20K node dependency graph in d3. Power mode graphs, such as http://bl.ocks.org/mbostock/1153292 , are too slow to render in the browser for this number of nodes.

Basically, I want to represent nodes containing text and directed edges from one node to another, and add zoom and pan functions. How can I do this in d3?

Answer 1

The zoom behavior (and panning) you get is mostly free through the zoom behavior . The layout you would need to do yourself — the layout of strength — is almost the only thing in D3 that you can use to lay out a chart of this kind.

Regardless of what you use, with 20K nodes, any dynamics will be quite slow - just displaying all the elements will take quite a while, during which the browser will seem unresponsive. An alternative that you can consider is to pre-render the graph using something more suitable for large amounts of data, save the result as an image (or even a static SVG) and add a little D3 code on top for zooming / panning.

Answer 2

Here is an alternative that does not seem to use force to lay out nodes - there are no springs, it works well and has a built-in upload / download method. His license is MIT / X:

Interactive tool for creating directed graphs using d3.js

directed graph creator

Operation:

• drag / scroll to translate / scale the graph
• click on the graph to create a node
• slide the switch to node and then drag it to another node to associate them with the directed edge
• click on the node to change the title
• click on node or edge and click backspace / delete to delete

Answer 3

You can create a static oriented graph without animation using force.start, force.tick, force.stop. Here is an example:

http://vida.io/documents/fGzpzjP98Bs2ShMHW

Loading 20K nodes can only be a performance issue with a static graph. You can save the chart and then load it without calculating d3.