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 则会拥有一样的深度坐标（例如在纵向布局的 graph 中 y 坐标相同）。下文中咱们会用示例 graph 进一步解释 rank 的做用。
• label，即标签，label 不是 DAG 中的必要元素，但 dagre 为了适用更多的场景增长了对 edge label 的布局计算。

深刻 rank

接下来的示例中咱们会用一种易懂的描述语言表达一个 DAG 的 node 与 edge：A -> B表明 A 和 B 两个 node 以及一条由 A 指向 B 的 edge。

示例 1

A->B;
B->C;

    +---+       +---+        +---+  
    | A |------>| B |------->| C |  
    +---+       +---+        +---+

在这个示例中，node A, B, C 分别属于 3 个 rank。

示例 2

A->B;
A->C;

                +---+
            --> | B |
    +---+--/    +---+
    | A |
    +---+--\    +---+
            --> | C |
                +---+

在这个示例中，A 在 rank1 中，而 B 和 C 都比 A 低一个层级，属于 rank2，所以 B 和 C 拥有一样的 x 坐标（示例图为横行延伸，所以深度方向为 x 方向）。

示例 3

A->B;
B->C;
A->C;

                +---+
             -->| B |---\
    +---+---/   +---+    --->+---+  
    | A |                    | C |  
    +---+------------------->+---+

在这个示例中，咱们发现 edge 两端的 node 能够相差超过一个 rank。因为 edge 两端的 node 不可属于一样的 rank，因此咱们不能让 B 和 C 属于同一个 rank，进而最优的绘制结果为 A 和 C 之间相隔两个 rank。

在这三个例子中，咱们已经对 rank 的含义和规则有了更好的理解，接下来能够看看 dagre 容许咱们对各种布局元素作怎样的配置。