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.

Looks like there's a pending feature request in d3: https://github.com/mbostock/d3/issues/349 — Catherine, Jul 05 '12 at 04:18

Brian D'Astous · Accepted Answer · 2016-11-14T22:53:38.700

7

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

edited Nov 14 '16 at 22:53

answered Apr 05 '13 at 18:55

Brian D'Astous

1,314
1
18
26

1

We have indeed went with the Dagre route: https://github.com/evilmartians/furnace-xray – Catherine Apr 05 '13 at 21:45
you have a broken link – Sheena Jan 07 '15 at 15:35
Here is a link to a Dagre D3 demo: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html – peater Jul 28 '16 at 19:01

Layered graphs in d3.js

1 Answers1

Linked