亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Graph 數(shù)據(jù)可視化：JS 自動(dòng)布局有向無(wú)環(huán)圖

zhouzhou / 3395人閱讀

摘要：可以用于模型化許多不同種類的信息，因此將一個(gè)數(shù)據(jù)結(jié)構(gòu)可視化的需求也變得非常普遍。并且由于大部分圖的數(shù)據(jù)都非常復(fù)雜甚至動(dòng)態(tài)變化，所以自動(dòng)可配置的可視化布局算法顯然比人為排版更為高效且可靠。

有向無(wú)環(huán)圖（DAG）布局 有向無(wú)環(huán)圖及其布局算法

有向無(wú)環(huán)圖（directed acyclic graph，以下簡(jiǎn)稱 DAG）是一種常見(jiàn)的圖形，其具體定義為一種由有限個(gè)頂點(diǎn)和有限條帶有方向的邊組成的圖，并且其中任意一個(gè)頂點(diǎn)都不能沿著邊再次指向自己。

DAG 可以用于模型化許多不同種類的信息，因此將一個(gè) DAG 數(shù)據(jù)結(jié)構(gòu)可視化的需求也變得非常普遍。并且由于大部分圖的數(shù)據(jù)都非常復(fù)雜甚至動(dòng)態(tài)變化，所以自動(dòng)、可配置的 DAG 可視化布局算法顯然比人為排版更為高效且可靠。

為滿足筆者所在項(xiàng)目一個(gè)可視化功能（其邏輯可視為一個(gè) DAG）的開(kāi)發(fā)，我們需要一個(gè)可在瀏覽器端進(jìn)行布局計(jì)算的 js 庫(kù)，并且基于計(jì)算結(jié)果進(jìn)行渲染。經(jīng)過(guò)調(diào)研，社區(qū)的一個(gè)項(xiàng)目 dagre 基本可以滿足我們的需求，但需要徹底掌握其計(jì)算邏輯我們還需要理解一些基本概念和對(duì)應(yīng)配置項(xiàng)之間的關(guān)系。

基本概念

dagre 主要基于《A Technique for Drawing Directed Graphs》 的理論進(jìn)行實(shí)現(xiàn)，因此也有以下幾類單位：

graph，即圖整體，我們可以對(duì)圖配置一些全局參數(shù)。

node，即頂點(diǎn)，dagre 在計(jì)算時(shí)并不關(guān)心 node 實(shí)際的形狀、樣式，只要求提供維度信息。

edge，即邊，edge 需要聲明其兩端的 node 以及本身方向。例如A -> B表示一條由 A 指向 B 的 edge。

rank，即層級(jí)，rank 是 DAG 布局中的核心邏輯單位，edge 兩端的 node 一定屬于不同的 rank，而同一 rank 中的 node 則會(huì)擁有同樣的深度坐標(biāo)（例如在縱向布局的 graph 中 y 坐標(biāo)相同）。下文中我們會(huì)用示例 graph 進(jìn)一步解釋 rank 的作用。

label，即標(biāo)簽，label 不是 DAG 中的必要元素，但 dagre 為了適用更多的場(chǎng)景增加了對(duì) edge label 的布局計(jì)算。

深入 rank

接下來(lái)的示例中我們會(huì)用一種易懂的描述語(yǔ)言表達(dá)一個(gè) DAG 的 node 與 edge：A -> B代表 A 和 B 兩個(gè) node 以及一條由 A 指向 B 的 edge。

示例 1 
A->B;
B->C;

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

在這個(gè)示例中，node A, B, C 分別屬于 3 個(gè) rank。

示例 2 
A->B;
A->C;

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

在這個(gè)示例中，A 在 rank1 中，而 B 和 C 都比 A 低一個(gè)層級(jí)，屬于 rank2，因此 B 和 C 擁有同樣的 x 坐標(biāo)（示例圖為橫行延伸，因此深度方向?yàn)?x 方向）。

示例 3 
A->B;
B->C;
A->C;

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

在這個(gè)示例中，我們發(fā)現(xiàn) edge 兩端的 node 可以相差超過(guò)一個(gè) rank。由于 edge 兩端的 node 不可屬于同樣的 rank，所以我們不能讓 B 和 C 屬于同一個(gè) rank，進(jìn)而最優(yōu)的繪制結(jié)果為 A 和 C 之間相隔兩個(gè) rank。

在這三個(gè)例子中，我們已經(jīng)對(duì) rank 的含義和規(guī)則有了更好的理解，接下來(lái)可以看看 dagre 允許我們對(duì)各類布局元素做怎樣的配置。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107710.html

相關(guān)文章

  • 有向無(wú)環(huán)圖自動(dòng)布局

    摘要：判斷是否成環(huán)執(zhí)行拓?fù)渑判颍绻蛄兄械捻旤c(diǎn)數(shù)不等于有向圖的頂點(diǎn)個(gè)數(shù)，則說(shuō)明圖中存在環(huán)。如果訪問(wèn)過(guò)，且不是其父節(jié)點(diǎn)，那么就構(gòu)成環(huán)圖有向無(wú)環(huán)圖的最小路徑覆蓋圖存儲(chǔ)鄰接矩陣圖的鄰接矩陣存儲(chǔ)方式是用兩個(gè)數(shù)組來(lái)表示圖。 何為有向無(wú)環(huán)圖？ 1、首先它是一個(gè)圖，然后它是一個(gè)有向圖，其次這個(gè)有向圖的任意一個(gè)頂點(diǎn)出發(fā)都沒(méi)有回到這個(gè)頂點(diǎn)的路徑，是為有向無(wú)環(huán)圖2、DAG（Directed Acyclic G...

    shenhualong 評(píng)論0 收藏0

  • IaC 自動(dòng)化配置與編排神器 - Terraform 深度解析

    摘要：而對(duì)于依賴關(guān)系的抽象，業(yè)界最通行的做法即使用有向無(wú)環(huán)圖，來(lái)描述事務(wù)間的依賴關(guān)系。圖表并行遍歷，執(zhí)行資源動(dòng)作從根節(jié)點(diǎn)開(kāi)始，并行地去編排整個(gè)資源拓?fù)?，遍歷整個(gè)有向無(wú)環(huán)圖，直到所有資源都被成功編排，并執(zhí)行清理操作。前言Terraform 是 Hashicorp 公司開(kāi)源的一種多云資源編排工具。使用者通過(guò)一種特定的配置語(yǔ)言（HCL Hashicorp Configuration Language）來(lái)...

    Tecode 評(píng)論0 收藏0

  • Spark Streaming遇到問(wèn)題分析

    摘要：遇到問(wèn)題分析之后搞了個(gè)還沒(méi)仔細(xì)了解可參考的與的有區(qū)別及并發(fā)控制先看看的，與的這幾個(gè)概念。一個(gè)可以認(rèn)為就是會(huì)最終輸出一個(gè)結(jié)果的一條由組織而成的計(jì)算。在中，我們通過(guò)使用新極大地增強(qiáng)對(duì)狀態(tài)流處理的支持。 Spark Streaming遇到問(wèn)題分析 1、Spark2.0之后搞了個(gè)Structured Streaming 還沒(méi)仔細(xì)了解,可參考：https://github.com/lw-lin/...

    stormzhang 評(píng)論0 收藏0

  • 算法（第4版） Chapter 4.2 有向圖

    摘要：只好特地拎出來(lái)記錄證明一下算法步驟第一步在逆圖上運(yùn)行，將頂點(diǎn)按照逆后序方式壓入棧中顯然，這個(gè)過(guò)程作用在有向無(wú)環(huán)圖上得到的就是一個(gè)拓?fù)渑判蜃饔迷诜巧系玫降氖且粋€(gè)偽拓?fù)渑判虻诙皆谠瓐D上按第一步的編號(hào)順序進(jìn)行。等價(jià)于已知在逆圖中存在有向路徑。 Algorithms Fourth EditionWritten By Robert Sedgewick & Kevin WayneTranslat...

    曹金海 評(píng)論0 收藏0

  • 【超越白皮書(shū)3】DAG技術(shù)解析與實(shí)測(cè)

    摘要：有向無(wú)環(huán)圖，以下簡(jiǎn)稱是其中的代表之一。的去中心化和可擴(kuò)展性可認(rèn)為是一體兩面的，因?yàn)榛跀?shù)據(jù)結(jié)構(gòu)帶來(lái)的異步記賬特性，同時(shí)實(shí)現(xiàn)了高度的參與網(wǎng)絡(luò)節(jié)點(diǎn)的去中心化和交易的可擴(kuò)展性。因此，目前對(duì)于雙花問(wèn)題，需要綜合考慮實(shí)際情況進(jìn)行設(shè)計(jì)。 本報(bào)告由火幣區(qū)塊鏈研究院出品，作者：袁煜明、胡智威。原文地址 相關(guān)報(bào)告： 【超越白皮書(shū)2】EOS主網(wǎng)上線前夕的實(shí)測(cè)分析與技術(shù)建議 【超越白皮書(shū)1】EOSIO程序?qū)?..

    caikeal 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<