d3.js中的分层图

问题描述:

我目前使用Graphviz来显示控制流程图。基本上,(可缩减)控制流图是DAG加上指向前面层中的节点的一些边。后边缘不应影响节点放置。

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.

目前, dot 绘制的图形相当漂亮,容易添加交互性(例如折叠,滚动,缩放),这对于非常大的图形的分析是无价的。因此,我选择d3.js作为最成熟和功能丰富的图形库。

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.

我确定有一个简单的方法来绘制分层图 dot 但我似乎不认识它。我怎么做?

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.

有向图绘制的Dagre库是render-agnostic,但与d3.js很好地集成: https://github.com/cpettitt/dagre

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

这里是使用D3渲染的演示: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

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