G6 2.0 開源釋出 -- 裂變·聚變

螞蟻金服_AntV發表於2018-06-06

G6 是螞蟻金服-AntV 旗下的針對關係資料的視覺化引擎。從 2016 年 12 月，G6 立項至今，已經過去了 1 年半的時間。在過去的時光裡，G6 直接或間接的支援了阿里經濟體近一百個業務系統。期間獲得過讚譽，也有吐槽，取得一定成就，也暴露過不少問題。半年前，我們結合真實業務需求和業內成熟框架的特點，以及自己內心的丁點不安分創新，開啟了 G6 2.0 的開發工作，經過精心設計，以及與諸多業務方數月共同打磨 ——

今天，我們懷著誠心、真心、謙卑之心，以及「 **讓人們在資料世界裡獲得視覺能力 **」的夢想，為大家奉上 G6 2.0。

G6 名字的由來

流程圖，流流流，666，溜溜溜？
G2 叫 G two。G6 叫 G six ?
G 是圖形可以理解，6 跟關係資料有什麼關係？
……

由於這個問題被很多人問到過，所以在正式介紹 G6 2.0 的新架構，新特性之前，我們覺得還是有必要先介紹一下 G6 這個名字的由來。

G6 的 G 來自於 Graphic、Graph ，意味著我們要基於圖形技術做圖視覺化；
G6 的 6 來自於《六度分隔理論》，表達了我們對關係資料，關係網路的敬畏和著迷；
G6 念 G六

裂變

配圖來源：https://www.c82.net/blog/?id=71

自 G6 誕生以來，公司內部由 G6 承接的業務可以分為兩大類，一者是 **圖分析類，二者是圖編輯 類。兩者雖說都是關係型資料，但兩者的側重點各不相同，前者更注重繪製的效能、佈局的質量，資料鑽取等分析體驗。後者更注重命令操作、資料讀存等人機互動的編輯體驗。由於之前人力上和認識上的侷限，**1.0 中我們強行把兩個場景全部揉在 G6 這一個庫裡，隨著業務的發展，G6 自身變得越來越臃腫，越來越矛盾，發展變得舉步維艱。團隊同學經過深入討論和思考，決定將 G6 一分為二，由此，G6 開始了工程上的裂變：

幹活程式設計師：這絕對是一個蠻大的架構變化，甚至從工程上談得上傷筋動骨，陷入深坑，有條件要上，沒有條件創造條件也要上 ⊙﹏⊙

更完備

完備圖項

2.0 中我們除了原有的兩個基本圖項（Item），節點（Node），邊（Edge），還引入了另外兩個基本元素：組（Group），導引（Guide）。至此，我們可以基於 G6 在思維完全不饒的情況下去畫任何你想畫的圖。（意味著以後你可以再也不用偷換概念的去用節點模擬一個組，模擬一個背景，或其它什麼東西。）

群組

導引資訊

層級拍平

G6 1.0 中節點和邊位於兩個圖層，這個時候意味著，你只能讓所有邊都在節點上方或者都在下方。2.0 中我們將節點和邊放在了同一個圖層，這意味這你可以任意控制不同邊和節點間的層疊關係。

更精簡、更清晰、更友好的介面設計

隨著 2.0 架構的升級，G6 沉為了底層的關係圖視覺化引擎，其本身不提供（很少提供）上層建築（節點型別、邊型別、基礎互動、佈局演算法）的具體實現，只提供一套高可擴充套件的機制。得益此次的減負，G6 優化了大量介面設計，如果用過 1.0，相信大家能明顯感受到介面更精簡，更自洽，概念更清晰。詳見：連結。

開放外掛擴充套件

為了更好的沉澱一些中等程度的、具體場景相關的工作，以及為了和社群更好的融合形成合力，G6 2.0 中我們開放了外掛的擴充套件。詳見：連結。

聚變

配圖來源：https://www.google.com.hk/search

在決定了 G6 未來上面會長 G6-Analyser 和 G6-Editor 兩個獨立專案後，我們深刻的明白，光靠工程是做不好上面兩件事情的，我們需要更多與其它專業領域深度融合。

這次，我們很高興的告訴大家，今天除了開源 G6 ，還會開放取得了階段性成果的 G6-Editor ! 詳見：連結** 。**

與設計深入融合

資料視覺化可能一開始就跟美是分不開，而且我們又在 UED 部門，所以我們首先會想到和專業的設計同學深度融合。本次 G6-Editor 作為一個相對上層的中介軟體，其對外輸出的一半是工程，另一半是設計。大家也許很難想象，為什麼設計佔了如此分量大，看完這篇 G6-Editor 互動設計沉思錄，大家應能窺得一斑。