1 mxGraph

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

1.1 特點

1 .可視化

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

2.圖的交互

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

3.圖的布局

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

4.圖的分析

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

1.2優(yōu)缺點

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

• 缺點：

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

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

2 AntV G6

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

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

2.1 應(yīng)用場景

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

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

云安全：

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

2.2 圖的種類

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

2.3 圖的分析

2.3.1 有明確目的

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

2.3.2 無明確目的

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

2.4 交互設(shè)計

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

交互事件的操作對象通常有：畫布、節(jié)點、組、邊等。

2.5 定制能力

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

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

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

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

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

• 節(jié)點可展開下級信息。

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

• 可以添加節(jié)點動畫

2.6 文檔齊全

圖實例豐富，API有對應(yīng)說明。

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

3 AntV X6

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

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

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

3.1 特性

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

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

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

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

3.2 業(yè)務(wù)場景

3.3 和G6對比

1. 需求方面

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

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

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

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

4. 是否需要支持移動端/小程序

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

4.總結(jié)

4.1下載量對比

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

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

4.2 mxGraph和AntV對比

對于mxGraph和AntV：

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

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

4.3 AntV的X6和G6對比

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

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

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

• 支持移動端：目前，在移動端，G6 可以支持展示和簡單交互，X6不支持。

• 包大小：X6：23.8MB；G6：45.8MB

4.4 工時估計

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

• mxGraph：三個月

• G6：兩個月

• X6：一個月

4.5 建議

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

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

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