G6 是 螞蟻金服-AntV 旗下的針對(duì)關(guān)系數(shù)據(jù)的可視化引擎。從 2016 年 12 月，G6 立項(xiàng)至今，已經(jīng)過去了 1 年半的時(shí)間。在過去的時(shí)光里，G6 直接或間接的支持了阿里經(jīng)濟(jì)體近一百個(gè)業(yè)務(wù)系統(tǒng)。期間獲得過贊譽(yù)，也有吐槽，取得一定成就，也暴露過不少問題。半年前，我們結(jié)合真實(shí)業(yè)務(wù)需求和業(yè)內(nèi)成熟框架的特點(diǎn)，以及自己內(nèi)心的丁點(diǎn)不安分創(chuàng)新，開啟了 G6 2.0 的開發(fā)工作，經(jīng)過精心設(shè)計(jì)，以及與諸多業(yè)務(wù)方數(shù)月共同打磨 ——

今天，我們懷著誠(chéng)心、真心、謙卑之心，以及「?**讓人們?cè)跀?shù)據(jù)世界里獲得視覺能力?**」的夢(mèng)想，為大家奉上 G6 2.0。

G6 名字的由來

• 流程圖，流流流，666，溜溜溜？
• G2 叫 G two。G6 叫 G six ?
• G 是圖形可以理解，6 跟關(guān)系數(shù)據(jù)有什么關(guān)系？
• ……

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

G6 的 G 來自于 Graphic、Graph ，意味著我們要基于圖形技術(shù)做圖可視化；

G6 的 6 來自于《六度分隔理論》，表達(dá)了我們對(duì)關(guān)系數(shù)據(jù)，關(guān)系網(wǎng)絡(luò)的敬畏和著迷；

G6 念 G六

裂變

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

自 G6 誕生以來，公司內(nèi)部由 G6 承接的業(yè)務(wù)可以分為兩大類，一者是 **圖分析 類，二者是 圖編輯 類。兩者雖說都是關(guān)系型數(shù)據(jù)，但兩者的側(cè)重點(diǎn)各不相同，前者更注重繪制的性能、布局的質(zhì)量，數(shù)據(jù)鉆取等分析體驗(yàn)。后者更注重命令操作、數(shù)據(jù)讀存等人機(jī)交互的編輯體驗(yàn)。由于之前人力上和認(rèn)識(shí)上的局限，**1.0 中我們強(qiáng)行把兩個(gè)場(chǎng)景全部揉在 G6 這一個(gè)庫(kù)里，隨著業(yè)務(wù)的發(fā)展，G6 自身變得越來越臃腫，越來越矛盾，發(fā)展變得舉步維艱。團(tuán)隊(duì)同學(xué)經(jīng)過深入討論和思考，決定將 G6 一分為二，由此，G6 開始了工程上的裂變：

干活程序員：這絕對(duì)是一個(gè)蠻大的架構(gòu)變化，甚至從工程上談得上傷筋動(dòng)骨，陷入深坑，有條件要上，沒有條件創(chuàng)造條件也要上 ⊙﹏⊙

更完備

完備圖項(xiàng)

2.0 中我們除了原有的兩個(gè)基本圖項(xiàng)（Item），節(jié)點(diǎn)（Node），邊（Edge），還引入了另外兩個(gè)基本元素：組（Group），導(dǎo)引（Guide）。至此，我們可以基于 G6 在思維完全不饒的情況下去畫任何你想畫的圖。（意味著以后你可以再也不用偷換概念的去用節(jié)點(diǎn)模擬一個(gè)組，模擬一個(gè)背景，或其它什么東西。）

• 群組

• 導(dǎo)引信息

層級(jí)拍平

G6 1.0 中節(jié)點(diǎn)和邊位于兩個(gè)圖層，這個(gè)時(shí)候意味著，你只能讓所有邊都在節(jié)點(diǎn)上方或者都在下方。2.0 中我們將節(jié)點(diǎn)和邊放在了同一個(gè)圖層，這意味這你可以任意控制不同邊和節(jié)點(diǎn)間的層疊關(guān)系。

更精簡(jiǎn)、更清晰、更友好的接口設(shè)計(jì)

隨著 2.0 架構(gòu)的升級(jí)，G6 沉為了底層的關(guān)系圖可視化引擎，其本身不提供（很少提供）上層建筑（節(jié)點(diǎn)類型、邊類型、基礎(chǔ)交互、布局算法）的具體實(shí)現(xiàn)，只提供一套高可擴(kuò)展的機(jī)制。得益此次的減負(fù)，G6 優(yōu)化了大量接口設(shè)計(jì)，如果用過 1.0，相信大家能明顯感受到接口更精簡(jiǎn)，更自洽，概念更清晰。詳見：鏈接 。

開放插件擴(kuò)展

為了更好的沉淀一些中等程度的、具體場(chǎng)景相關(guān)的工作，以及為了和社區(qū)更好的融合形成合力，G6 2.0 中我們開放了插件的擴(kuò)展。詳見：鏈接 。

聚變

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

在決定了 G6 未來上面會(huì)長(zhǎng) G6-Analyser 和 G6-Editor 兩個(gè)獨(dú)立項(xiàng)目后，我們深刻的明白，光靠工程是做不好上面兩件事情的，我們需要更多與其它專業(yè)領(lǐng)域深度融合。

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

與設(shè)計(jì)深入融合

數(shù)據(jù)可視化可能一開始就跟美是分不開，而且我們又在 UED 部門，所以我們首先會(huì)想到和專業(yè)的設(shè)計(jì)同學(xué)深度融合。本次 G6-Editor 作為一個(gè)相對(duì)上層的中間件，其對(duì)外輸出的一半是工程，另一半是設(shè)計(jì)。大家也許很難想象，為什么設(shè)計(jì)占了如此分量大，看完這篇 G6-Editor 交互設(shè)計(jì)沉思錄 ，大家應(yīng)能窺得一斑。

與產(chǎn)品深度融合

為了避免 G6-Analyser 和 G6-Editor 成為工程師閉門造車的產(chǎn)物。在打造這兩個(gè)技術(shù)產(chǎn)品時(shí)，我們會(huì)和內(nèi)部大量的商業(yè)產(chǎn)品深入合作，對(duì)各個(gè)交互細(xì)節(jié)反復(fù)推敲。最終將經(jīng)過成熟的思考的結(jié)論內(nèi)化到 G6 技術(shù)棧。

產(chǎn)品的深度合作，使得我們更有可能打造精品，并為未來打造開箱即用 圖分析 與 圖編輯 中間件打下堅(jiān)實(shí)基礎(chǔ)。

• 語雀腦圖 （內(nèi)測(cè)中）

• 內(nèi)部分析應(yīng)用 -- 河流圖（數(shù)據(jù)虛構(gòu)）

• 內(nèi)部分析應(yīng)用 -- 流量網(wǎng)圖（數(shù)據(jù)虛構(gòu)）

開源·寄語

幾經(jīng)努力 G6 終于也走上了 **開源 之路，心中小辛酸根本難掩內(nèi)心深處的喜悅。希望開源之后能更好的回饋社區(qū)，更好的從社區(qū)中汲取養(yǎng)分，希望大家在使用過程中多看文檔，善研代碼，勤提PR，互幫互助，提有深度的問題，有建設(shè)性的建議。**期待與大家共同努力，共同成長(zhǎng)，共同進(jìn)步～！

項(xiàng)目地址

官網(wǎng)：antv.alipay.com/zh-cn/g6/

github：github.com/antvis/g6

最后

夾帶幾個(gè)私貨：

• 《史上最 6 的可視化大賽》
• 《知乎？哲也！》
• 求賢若渴，若有意加入 AntV 請(qǐng)發(fā)送郵件至：antv@antfin.com

“此生與你赤誠(chéng)相見是我莫大榮幸，往后的日子還請(qǐng)多多指教”

—— AntV / G6

原文鏈接

轉(zhuǎn)載于:https://juejin.im/post/5b175ae35188257d4849d282

總結(jié)

以上是生活随笔為你收集整理的G6 2.0 开源发布 -- 裂变·聚变的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。