Graph 数据可视化：JS 自动布局有向无环图

有向无环图（DAG）布局

有向无环图及其布局算法

有向无环图（directed acyclic graph，以下简称 DAG）是一种常见的图形，其具体定义为一种由有限个顶点和有限条带有方向的边组成的图，并且其中任意一个顶点都不能沿着边再次指向自己。

DAG 可以用于模型化许多不同种类的信息，因此将一个 DAG 数据结构可视化的需求也变得非常普遍。并且由于大部分图的数据都非常复杂甚至动态变化，所以自动、可配置的 DAG 可视化布局算法显然比人为排版更为高效且可靠。

为满足笔者所在项目一个可视化功能（其逻辑可视为一个 DAG）的开发，我们需要一个可在浏览器端进行布局计算的 js 库，并且基于计算结果进行渲染。经过调研，社区的一个项目 dagre 基本可以满足我们的需求，但需要彻底掌握其计算逻辑我们还需要理解一些基本概念和对应配置项之间的关系。

基本概念

dagre 主要基于《A Technique for Drawing Directed Graphs》 的理论进行实现，因此也有以下几类单位：

• graph，即图整体，我们可以对图配置一些全局参数。
• node，即顶点，dagre 在计算时并不关心 node 实际的形状、样式，只要求提供维度信息。
• edge，即边，edge 需要声明其两端的 node 以及本身方向。例如A -> B表示一条由 A 指向 B 的 edge。
• rank，即层级，rank 是 DAG 布局中的核心逻辑单位，edge 两端的 node 一定属于不同的 rank，而同一 rank 中的 node 则会拥有同样的深度坐标（例如在纵向布局