本文作者：AntV 架構師-蕭慶
簡介
G6 是一個圖關系可視化引擎，起始於我們的業務需求，歷經波折，每次改版其架構都有很大的變化，這些變化背后都有來自業務上的思考和我們對 G6 定位的調整，今天我們一起來回顧：
- G6 之前的關系可視化
- V1.0 關系映射
- V2.0 圖編輯器
- V3.0 圖分析引擎
G6 發展的時間線如下：
G6 之前的關系可視化
早在做 G2 之前我們就接觸了集團內部一些關系圖的項目，以安全和風控的業務為主，也有一些動態的流程圖，但是團隊遲遲沒有決定編寫一套關系圖框架，很大的一個原因在於：有太多失敗的關系圖項目。
往往是項目一開始得到各個方面的大力支持，我們配合設計師做了一套好看炫酷的關系圖展示頁面，初期開發者、設計者都很滿意，但是真正的使用者依然解決不了問題，大都類似於這類圖：
一方面用戶很難完成業務上的任務，看起來好看但是不好用，另一方面使用的技術棧很零散，一旦我們退出這個項目，后期基本處於維護乏力的狀況。
當我們開始做 G2 后，需要在 G2 中實現一些關系圖：
這時候很多部門的開發同學希望我們在 G2 中也能支持流程圖，例如： 
但是 G2 的架構來做關系圖的展示還行，增加很多交互、支持各種布局、各種復雜的關系節點，那就非常不合適了，恰巧當時發生其他兩件事，使我決定來開發一個關系圖框架：
- 第一件事是當時一個業務上面臨數千個流程圖的定義，不同的商家需要不同的流程，業務上的開發沒有自動布局的基礎，他們只能用代碼一個個的來標注 x,y 坐標繪制流程圖，想想都心疼。
- 第二件事是一個業務方之前使用了 jointjs 進行開發，中間更換了各種流程圖框架，后面維護和開發不下去了，他們寫了一封幾千字，包括很多張圖的郵件給我。
作為一個可視化的開發人員面臨這種情況讓我坐立不安，我找到玉伯去申請開始研發一個新的關系圖的框架，經過大家討論后起名為 G6（六度分離理論）
v0.1-v1.0 關系映射
通過對幾個關系圖業務的支持，我發現靜態的關系圖對業務上幾乎沒價值，大部分場景都是用戶有業務數據，需要自動的布局方案來展示出關系圖（流程圖），但是我們提供的布局方案往往滿足不了業務上的需求，所以我們在 G6 的第一個版本中，對關系圖的業務做了一個假設，用戶有兩個關系圖視圖：
- 第一個是編輯視圖，可以自動布局，然后輔助手工布局，讓關系圖更美觀好看
- 第二個展示視圖，呈現給最終用戶的視圖，可以做一些簡單的交互（展開、收縮、隱藏邊等）
所以 G6 v1.0 是沿着 G2 的思路，以關系映射為核心，支持常見的布局算法，支持簡單的拖拽等交互，其架構如下： 
- 擴展 Shape 的機制保持同 G2 一致
- 所有的交互通過 mixin 內置，不可更改
第一個版本開發了 3 個月，后面又迭代了 1.1 和 1.2 兩個版本，持續了 8-9 個月，實現了常見的樹圖、桑基圖、流程圖，也實現了一些動態效果，集團內部迅速增長了一批用戶，當時的版本缺乏設計師的參與，可以看到基本都是程序員的審美： 
這一代的 G6 更像是 G2 的一個變種,通過下面的代碼就可以看出：
graph.source(data.nodes, data.edges);
graph.node().label('name').color('type'); graph.render();
這個版本我們持續開發的時間並不長，但是至今為止依然有數百個系統使用這個版本，沒有升級到最新的版本。我的理解是：很多業務場景下的流程圖並不復雜，變化的頻率並不高，簡單、易用、不需要復雜布局的一個精簡版本的關系圖就夠用了。
v2.0 圖編輯器
作關系圖躲避不了拖拖拽拽的編輯交互，而編輯交互又是極其復雜的：
- 添加節點/邊的方式有多種，節點可以編輯、改變大小、移動、刪除等
- 選中有多種形式，邊需要在節點調整是自動布局
- 一個節點有多個錨點，每個錨點的含義都不同，不同的情況下可以禁用，也可能禁止連入等等
業務上的需求使得我們無處可躲，實現這些交互在 G6 v1.0 的體系下根本不可能，所以我們開始了 2.0 的重構，於 18 年 1月開始了 2.0 的開發，6月份對外開源。這個版本增加了錨點機制、控制點機制，同時支持自定義交互（Behavior）, 這個版本的架構如下：
- 插件機制提供了布局、組件等支持
- 自定義交互（Behavior），可以插入式的實現交互，這一方式一直到現在依然保持
- 錨點和控制點是專門針對編輯場景設計的機制
這個版本開發完成后，一些常見的編輯場景都得以實現：
但是我們馬上發現用戶的接入成本非常高，這個只能算半個編輯器，用戶進行添加節點/邊、編輯節點、拖拽等操作時需要工具欄、各種面板，需要前進、后退、復制、黏貼等操作，同時上面的界面用戶紛紛表示太難看。
為了解決這些問題，我們找到設計師一起同我們對常見的流程圖（流程圖、建模、腦圖）進行了設計，每種流程圖的交互都進行了精心的設計，默認給用戶提供了流程圖編輯器需要的各種模塊，形成了 G6-Editor，其架構非常簡單：
我們來看一看 G6-Editor 的界面和操作：
G6-Editor 我們於 2018 年下半年對外推出（未開源，但允許商用），以其良好的設計、開箱即用的接入體驗收到非常多的公司商用申請，我們本來計划對這幾個場景進行更精細的設計、更精細的實現，但是我們太小瞧編輯器的難度。
從我們內部業務的反饋來看，這些編輯器減輕了首次開發的成本，使得接入更加簡單，但是由於交互和設計我們都已經固定，用戶慢慢的就開始增加各種編輯的交互，例如：如何控制邊的連接方式、某些錨點禁用的時機、邊的布局方式不滿足需求等等，更加雪上加霜的是維護 G6 和 G6-Editor 的只有一個同學，面對內部500+ 的系統，外部數百封郵件，經過半年痛苦的答疑、業務支持、改進交互，這位同學最終選擇了轉崗，最終我們決定 G6-Editor 編輯器不再開源😂，暫緩發展，這是過去兩年中非常大的一個遺憾。（當然今年 2020 年 3 月我們還會給大家帶來驚喜）。
v3.0 圖分析
時間來到 2018 年底，G6 2.0 的同學離開后，我同一位新同學開始了 G6 3.0 的開發，其業務背景是越來越多的非編輯場景（分析場景）使得 G6 2.0 支持起來非常吃力，通過關系圖發現異常、進行關系擴散以及對流量進行可視化等場景都是一些重要的業務。使得我們開始 3.0 開發時側重於分析場景進行了設計，對布局、組件和節點/邊的狀態管理進行更多的設計，更加側重展示更多節點和邊的性能，而錨點和控制點機制在這些場景太重（很少使用），所以在3.0 最初的版本並沒有進行設計，而這一版的架構如下：
我們兩個人投入了不到 2 個月的時間開發出了第一版，幾個重要的業務在短短的2個月內上線：
19 年初和年中又有多名同學參與了 G6，業務上的同學結合自己在關系分析方面的經驗和實踐，在 G6 的上層開發了一套開箱即用的工具 Graphin
有流量分析場景的業務方同學也基於流量分析和時序分析，做出了精彩的產品：
在過去的一年中 G6 v3.0 發展了 3 個版本，最新的 3.3 版本，進行了底層引擎替換，同時全面擁抱了 typescript，已經在年前發布了 beta 版，2020-02-11 日正式對外發布。
我們的腳步不會停止，在新的一年我們將開始 G6 4.0 的設計和開發，將對其組件、交互和計算進行大刀破斧的改造，提升其交互能力、性能、布局能力，同時在關系圖的時序可視化、地理可視化方面進行探索，下面是其架構：
總結
參與 G6 的這幾年，跌宕起伏，遇到過各種困難，面臨過各種挫折。雖然架構一直在調整，但我們一直在努力的改進 ，給業務、給社區帶來更多的可能。感謝集團對外所有 G6 用戶的支持，感謝這幾年被我們的不成熟導致的不兼容升級所痛的小伙伴們，同時向那些試用了 G6-Editor 但因為我們無法開源而所煩惱的用戶們致歉。
我們的步伐不會停止，知源致遠！
G6 官網地址：https://g6.antv.vision/zh
G6 的 github 地址：https://github.com/antvis/g6