1 mxGraph

mxGraph是用JS編寫(xiě),通過(guò)SVG和HTML進(jìn)行繪圖，它提供基本圖形繪制的api，可以在網(wǎng)頁(yè)中繪制UML圖、組織結(jié)構(gòu)圖、網(wǎng)絡(luò)圖和普通圖形以及其他更復(fù)雜的圖形

1.1 特點(diǎn)

1 .可視化

比如下圖是交通圖的可視化

2.圖的交互

如下圖所示，可以用mxGraph實(shí)現(xiàn)流程圖，可以通過(guò)復(fù)雜的鼠標(biāo)操作來(lái)編輯這個(gè)圖，包括折疊和展開(kāi)部分子圖。

3.圖的布局

當(dāng)圖的節(jié)點(diǎn)很多時(shí)，可以對(duì)圖的節(jié)點(diǎn)和邊進(jìn)行布局,mxGraph支持樹(shù)狀布局、力導(dǎo)向布局和層次布局等常見(jiàn)布局算法

4.圖的分析

可以對(duì)圖做一些聚類分析，也可以計(jì)算節(jié)點(diǎn)的最短路徑等。比如下圖顯示了一條最短路徑。

1.2優(yōu)缺點(diǎn)

• 優(yōu)點(diǎn)：利用mxGraph的api可以繪制各種復(fù)雜圖形和對(duì)圖進(jìn)行數(shù)據(jù)分析，以及對(duì)圖進(jìn)行一些復(fù)雜操作，如折疊展開(kāi)，樹(shù)狀布局，層次布局等

• 缺點(diǎn)：

• mxGraph官方文檔為全英文，官方給出的實(shí)例無(wú)明顯的閱讀順序，沒(méi)能很好的結(jié)合代碼講解，學(xué)習(xí)成本比較大

• 使用mxGraph需要開(kāi)發(fā)工作流需要額外開(kāi)發(fā)一些列針對(duì)工作流的功能，且不確定最后出來(lái)的效果是否有bpmn-js效果好

2 AntV G6

AntV是螞蟻集團(tuán)全新一代數(shù)據(jù)可視化解決方案，目前覆蓋了統(tǒng)計(jì)圖表、移動(dòng)端圖表、圖可視化、地理可視化、2D 繪圖引擎和智能可視化多個(gè)領(lǐng)域，主要包含 G2棧、F2棧、G6棧、X6棧、L7棧、AVA 以及一套完整的圖表使用和設(shè)計(jì)規(guī)范，已支撐起阿里集團(tuán)內(nèi)外 20000+ 業(yè)務(wù)系統(tǒng)，是阿里經(jīng)濟(jì)體數(shù)據(jù)可視化最重要的基礎(chǔ)設(shè)施。

G6 是一個(gè)簡(jiǎn)單、易用、完備的圖可視化引擎，能幫助開(kāi)發(fā)者搭建屬于自己的圖可視化、圖分析、或圖編輯器應(yīng)用。

2.1 應(yīng)用場(chǎng)景

• 對(duì)現(xiàn)狀的記錄、闡明、揭示：如對(duì)機(jī)房安全，流量監(jiān)控等現(xiàn)狀的監(jiān)控；

• 對(duì)現(xiàn)狀的擴(kuò)展、抽象（對(duì)未來(lái)的預(yù)測(cè)）：如基于人工智能的各類技術(shù)，對(duì)于圖的預(yù)測(cè)和實(shí)時(shí)防控。

云安全：

企業(yè)風(fēng)控：

2.2 圖的種類

基于 AntV 自身的業(yè)務(wù)，歸納出幾種常見(jiàn)圖的類型：關(guān)系圖、流程圖、DAG 圖、血緣圖、ER 圖、樹(shù)狀圖

2.3 圖的分析

2.3.1 有明確目的

這類分析模式是有明確的分析或查詢條件，如規(guī)則查詢、關(guān)聯(lián)分析、篩選/搜索畫(huà)布、查看詳情等。這類模式下，通常需要通過(guò)搜索或在各種類型的輸入面板中，輸入查詢語(yǔ)句、規(guī)則等明確的條件信息，來(lái)進(jìn)行探查和分析。

2.3.2 無(wú)明確目的

無(wú)明確目的地探索是指基于已有數(shù)據(jù)內(nèi)容，進(jìn)行關(guān)系的 N 度擴(kuò)展、下鉆分析、子圖探索、撤銷回退等操作，來(lái)挖掘數(shù)據(jù)中的特性，發(fā)現(xiàn)價(jià)值或機(jī)會(huì)點(diǎn)的分析過(guò)程。

2.4 交互設(shè)計(jì)

支持完整的交互設(shè)計(jì)行為，如節(jié)點(diǎn)雙擊時(shí)展開(kāi)，單擊時(shí)高亮等常見(jiàn)通用規(guī)則以及各個(gè)交互的操作對(duì)象根據(jù)不同的「規(guī)則」所呈現(xiàn)出來(lái)的行為或樣式表達(dá)，通常以各類視覺(jué)屬性變化的形式出現(xiàn)。

交互事件的操作對(duì)象通常有：畫(huà)布、節(jié)點(diǎn)、組、邊等。

2.5 定制能力

圖的構(gòu)成元素包括節(jié)點(diǎn)（Node）、邊（Edge）和組（Combo），這些基礎(chǔ)元素是圖的原子組成部分，設(shè)計(jì)者可根據(jù)特定業(yè)務(wù)場(chǎng)景變更節(jié)點(diǎn)、邊、組的配色和組合形式，搭建更復(fù)雜的圖可視分析應(yīng)用

如根據(jù)業(yè)務(wù)場(chǎng)景需要，可自由定制節(jié)點(diǎn)：

• 節(jié)點(diǎn)可加標(biāo)簽、可不加標(biāo)簽；

• 節(jié)點(diǎn)可存在不同形狀；

• 節(jié)點(diǎn)可加簡(jiǎn)短描述；

• 節(jié)點(diǎn)可展開(kāi)下級(jí)信息。

• 節(jié)點(diǎn)樣式可以自定義

• 可以添加節(jié)點(diǎn)動(dòng)畫(huà)

2.6 文檔齊全

圖實(shí)例豐富，API有對(duì)應(yīng)說(shuō)明。

官網(wǎng)文檔為交互式文檔，通過(guò)圖文合一的方式，能給開(kāi)發(fā)者帶來(lái)更流暢的體驗(yàn)。

3 AntV X6

X6 是 AntV 旗下的圖編輯引擎，提供了一系列開(kāi)箱即用的交互組件和簡(jiǎn)單易用的節(jié)點(diǎn)定制能力，方便我們快速搭建 DAG 圖、ER 圖、流程圖等應(yīng)用

在發(fā)展上，G6的圖編輯功能不能滿足重圖編輯（比如拖拽加入節(jié)點(diǎn)、從錨點(diǎn)拖拽創(chuàng)建邊、編輯邊的形狀）的需求，于是基于螞蟻內(nèi)部的機(jī)器學(xué)習(xí)算法建模平臺(tái)抽取了其中的圖編輯內(nèi)核，成為 AntV 繼 G6 圖分析的另一個(gè)圖可視化領(lǐng)域分支，圖編輯 X6。

X6是基于螞蟻內(nèi)部的機(jī)器學(xué)習(xí)算法建模平臺(tái)的圖編輯內(nèi)核，成為 AntV 繼 G6 圖分析的另一個(gè)圖可視化領(lǐng)域分支。

3.1 特性

• 極易定制：支持使用 SVG/HTML/React/Vue 定制節(jié)點(diǎn)樣式和交互；

• 開(kāi)箱即用：內(nèi)置 10+ 圖編輯配套擴(kuò)展，如框選、對(duì)齊線、小地圖等；

• 數(shù)據(jù)驅(qū)動(dòng)：基于 MVC 架構(gòu)，用戶更加專注于數(shù)據(jù)邏輯和業(yè)務(wù)邏輯；

• 事件驅(qū)動(dòng)：可以監(jiān)聽(tīng)圖表內(nèi)發(fā)生的任何事件

3.2 業(yè)務(wù)場(chǎng)景

3.3 和G6對(duì)比

1. 需求方面

X6偏向于編輯數(shù)據(jù)、樣式設(shè)計(jì)，即重圖編輯；

G6偏向于圖可視化與分析應(yīng)用

2. 數(shù)據(jù)量大小圖編輯一般是在“編輯修改數(shù)據(jù)”或“從 0-1 搭建數(shù)據(jù)”的過(guò)程，所以圖規(guī)模不會(huì)太大。X6 是基于 HTML 的，所以在較大規(guī)模的圖上性能不佳。而 G6 是基于 Canvas 的，在較大規(guī)模圖上可以保持流暢交互

3. 定制能力和上手成本由于 X6 是基于 HTML 的，所以使用者可以像寫(xiě) HTML 一樣去寫(xiě)一個(gè)節(jié)點(diǎn)，所以如果不太了解 Canvas 的開(kāi)發(fā)者，可以優(yōu)選 X6

4. 是否需要支持移動(dòng)端/小程序

目前，在移動(dòng)端，G6 可以支持展示和簡(jiǎn)單交互，且在不斷完善中。G6 正在進(jìn)行拆包工作，即將更好地支持移動(dòng)端/小程序。由于移 動(dòng)端/小程序?qū)π阅艿囊蟾?，因此這種需求優(yōu)選 G6

4.總結(jié)

4.1下載量對(duì)比

下面是在npm上截取的對(duì)比mxGraph，X6，G6兩年內(nèi)的下載量圖：

可以看出，最近兩年G6的下載量一直在mxGraph之上，且X6的下載量也在逐步上升，即將追上mxGraph。

4.2 mxGraph和AntV對(duì)比

對(duì)于mxGraph和AntV：

• mxGraph學(xué)習(xí)成本比較大，且不再維護(hù)更新，

• AntV學(xué)習(xí)成本相對(duì)來(lái)說(shuō)小很多，一直在持續(xù)更新中，且就目前了解的AntV的圖分析和圖編輯能力不比mxGraph遜色。

4.3 AntV的X6和G6對(duì)比

• 需求方面：X6是側(cè)重圖編輯，沒(méi)有圖分析能力；G6側(cè)重圖分析，兼有圖編輯能力，但是圖編輯能力偏弱，需要額外成本全實(shí)現(xiàn)重圖編輯功能

• 數(shù)據(jù)量規(guī)模：X6在大規(guī)模節(jié)點(diǎn)場(chǎng)景（200個(gè)節(jié)點(diǎn)以上）上性能沒(méi)有G6好。

• 上手成本：X6基于HTML，G6 是基于 Canvas

• 支持移動(dòng)端：目前，在移動(dòng)端，G6 可以支持展示和簡(jiǎn)單交互，X6不支持。

• 包大?。篨6：23.8MB；G6：45.8MB

4.4 工時(shí)估計(jì)

實(shí)現(xiàn)工作流，大概估計(jì)一下工時(shí)（這里包括支持bpmn規(guī)范的工時(shí)，這三種都不支持bpmn規(guī)范，需要額外開(kāi)發(fā)）：

• mxGraph：三個(gè)月

• G6：兩個(gè)月

• X6：一個(gè)月

4.5 建議

目前的需求（工作流，業(yè)務(wù)流）主要是在重圖編輯，建議采用X6；

后續(xù)若有圖分析的需求，如聚類算法、關(guān)聯(lián)分析、最短路徑等，建議采用G6；

轉(zhuǎn)：文章來(lái)源于網(wǎng)絡(luò)！