d3.js - d3.js 中的分层图

Question

我目前正在使用 Graphviz 来可视化控制流图。基本上，一个(可简化的)控制流图是一个 DAG 加上一些指向前一层节点的边。后面的边不应影响节点放置。

目前，dot非常整齐地绘制图形，但它缺乏一种简单的方法来添加交互性(例如折叠、滚动、缩放)，这对于分析非常大的图形来说是无价的。因此，我选择了 d3.js 作为最成熟、功能最丰富的图形库。

我很确定有一种简单的方法来绘制 layered graphs (正如 dot )在 d3.js 中，但我似乎不认识它。我怎么做？如果这有帮助，我已经对我的 CFG 进行了支配分析。

Answer 1

用于有向图绘制的 Dagre 库与渲染无关，但与 d3.js 集成良好:https://github.com/cpettitt/dagre

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