我目前正在使用Graphviz来可视化控制流图.基本上,(可简化的)控制流图是DAG加上一些指向前一层中节点的边.后一条边不应影响节点放置.
目前,dot
绘制图形非常整齐,但它缺乏一种简单的方法来添加交互性(例如折叠,滚动,缩放),这对于分析非常大的图形是无价的.因此,我选择d3.js作为最成熟且功能最丰富的图形库.
我很确定在d3.js 中有一种简单的方法来绘制分层图形(如同dot
),但我似乎并不认识它.我怎么做?如果这有帮助,我已经对我的CFG进行了支配者分析.
用于有向图绘制的Dagre库与渲染无关,但与d3.js很好地集成:https://github.com/cpettitt/dagre
这是使用D3渲染的演示:http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html