Layered graphs in d3.js

Question

I am currently using Graphviz for visualizing control flow graphs. Basically, a (reducible) control flow graph is a DAG plus some edges which point back to nodes in the previous layers. The latter edges should not affect node placement.

Currently, dot draws the graphs pretty neatly, but it lacks an easy way to add interactivity (e.g. folding, scrolling, zooming), which is priceless for analysis of very large graphs. Therefore, I selected d3.js as the most mature and feature-rich graphing library.

I'm pretty sure that there is an easy way to draw layered graphs (as does dot) in d3.js, but I don't seem to recognize it. How do I do that? If this helps, I already perform dominator analysis on my CFG.

Answer 1

The Dagre library for directed graph drawing is rendering-agnostic, but integrates well with d3.js: https://github.com/cpettitt/dagre

Here's a demo rendered using D3: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html