d3: Make a static directed graph

Question

I'd like to visualize a 20K node dependency graph in d3. Force-directed 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 zooming and panning functionality. How can I go about doing this in d3?

Answer 1

Here's an alternative which doesn't seem to use force to lay out the nodes - there's no springing, performs well, and has built in upload/download facility. Its license is MIT/X:

Interactive tool for creating directed graphs using d3.js

directed-graph-creator

Operation:

• drag/scroll to translate/zoom the graph
• shift-click on graph to create a node
• shift-click on a node and then drag to another node to connect them with a directed edge
• shift-click on a node to change its title
• click on node or edge and press backspace/delete to delete

Answer 2

The zoom behaviour (and pan) you would get basically for free through the zoom behaviour. The layout you would have to do yourself though -- the force layout is pretty much the only thing in D3 you can use to lay out a graph of this kind.

Regardless of what you're using, with 20K nodes anything dynamic is going to be pretty slow -- simply rendering all the elements is going to take quite some time during which the browser will seem unresponsive. An alternative you may want to consider is to pre-render the graph using something more suitable for large amounts of data, save the result as an image (or even static SVG) and add a little bit of D3 code on top for zoom/pan.