有向無環圖（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 許可我們對各種規劃元素做如何的設置。