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 容許咱們對各種佈局元素作怎樣的配置。