2012-07-05 24 views
9

Actualmente estoy usando Graphviz para visualizar gráficas de flujo de control. Básicamente, un gráfico de flujo de control (reducible) es un DAG más algunos bordes que apuntan a los nodos en las capas anteriores. Los últimos bordes no deberían afectar la colocación del nodo.Gráficos en capas en d3.js

Actualmente, dot dibuja los gráficos bastante bien, pero carece de una manera fácil de agregar interactividad (por ejemplo, plegado, desplazamiento, zoom), que no tiene precio para el análisis de gráficos muy grandes. Por lo tanto, seleccioné d3.js como la biblioteca gráfica más madura y rica en funciones.

Estoy bastante seguro de que hay una manera fácil de dibujar layered graphs (como hace dot) en d3.js, pero parece que no lo reconozco. ¿Cómo puedo hacer eso? Si esto ayuda, ya realizo un análisis dominador en mi CFG.

+4

Parece que hay una solicitud de función pendiente en d3: https://github.com/mbostock/d3/issues/349 – whitequark

Respuesta

5

La biblioteca Dagre para el dibujo gráfico dirigido es la representación agnóstica, pero se integra bien con d3.js: https://github.com/cpettitt/dagre

He aquí una demostración rendido usando D3: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

+1

De hecho, fuimos con la ruta Dagre: https://github.com/evilmartians/furnace-xray – whitequark

+0

tiene un enlace roto – Sheena

+0

Aquí hay un enlace a una demo de Dagre D3: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html – peater