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