AntV 架構演進-G6 篇

本文做者：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