1 mxGraph

mxGraph是用JS編寫,通過SVG和HTML進行繪圖，它提供基本圖形繪制的api，可以在網頁中繪制UML圖、組織結構圖、網絡圖和普通圖形以及其他更復雜的圖形

1.1 特點

1 .可視化

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

2.圖的交互

如下圖所示，可以用mxGraph實現流程圖，可以通過復雜的鼠標操作來編輯這個圖，包括折疊和展開部分子圖。

3.圖的布局

當圖的節點很多時，可以對圖的節點和邊進行布局,mxGraph支持樹狀布局、力導向布局和層次布局等常見布局算法

4.圖的分析

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

1.2優缺點

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

• 缺點：

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

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

2 AntV G6

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

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

2.1 應用場景

• 對現狀的記錄、闡明、揭示：如對機房安全，流量監控等現狀的監控；

• 對現狀的擴展、抽象（對未來的預測）：如基于人工智能的各類技術，對于圖的預測和實時防控。

云安全：

企業風控：

2.2 圖的種類

基于 AntV 自身的業務，歸納出幾種常見圖的類型：關系圖、流程圖、DAG 圖、血緣圖、ER 圖、樹狀圖

2.3 圖的分析

2.3.1 有明確目的

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

2.3.2 無明確目的

無明確目的地探索是指基于已有數據內容，進行關系的 N 度擴展、下鉆分析、子圖探索、撤銷回退等操作，來挖掘數據中的特性，發現價值或機會點的分析過程。

2.4 交互設計

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

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

2.5 定制能力

圖的構成元素包括節點（Node）、邊（Edge）和組（Combo），這些基礎元素是圖的原子組成部分，設計者可根據特定業務場景變更節點、邊、組的配色和組合形式，搭建更復雜的圖可視分析應用

如根據業務場景需要，可自由定制節點：

• 節點可加標簽、可不加標簽；

• 節點可存在不同形狀；

• 節點可加簡短描述；

• 節點可展開下級信息。

• 節點樣式可以自定義

• 可以添加節點動畫

2.6 文檔齊全

圖實例豐富，API有對應說明。

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

3 AntV X6

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

在發展上，G6的圖編輯功能不能滿足重圖編輯（比如拖拽加入節點、從錨點拖拽創建邊、編輯邊的形狀）的需求，于是基于螞蟻內部的機器學習算法建模平臺抽取了其中的圖編輯內核，成為 AntV 繼 G6 圖分析的另一個圖可視化領域分支，圖編輯 X6。

X6是基于螞蟻內部的機器學習算法建模平臺的圖編輯內核，成為 AntV 繼 G6 圖分析的另一個圖可視化領域分支。

3.1 特性

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

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

• 數據驅動：基于 MVC 架構，用戶更加專注于數據邏輯和業務邏輯；

• 事件驅動：可以監聽圖表內發生的任何事件

3.2 業務場景

3.3 和G6對比

1. 需求方面

X6偏向于編輯數據、樣式設計，即重圖編輯；

G6偏向于圖可視化與分析應用

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

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

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

目前，在移動端，G6 可以支持展示和簡單交互，且在不斷完善中。G6 正在進行拆包工作，即將更好地支持移動端/小程序。由于移 動端/小程序對性能的要求更高，因此這種需求優選 G6

4.總結

4.1下載量對比

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

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

4.2 mxGraph和AntV對比

對于mxGraph和AntV：

• mxGraph學習成本比較大，且不再維護更新，

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

4.3 AntV的X6和G6對比

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

• 數據量規模：X6在大規模節點場景（200個節點以上）上性能沒有G6好。

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

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

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

4.4 工時估計

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

• mxGraph：三個月

• G6：兩個月

• X6：一個月

4.5 建議

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

后續若有圖分析的需求，如聚類算法、關聯分析、最短路徑等，建議采用G6；

轉：文章來源于網絡！