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?
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
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.
