開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

小螞蟻說:

首先回顧上一次螞蟻金服AntV的相關開源消息:《螞蟻金服開源:數據驅動的高交互可視化圖形語法G2》。

AntV 是螞蟻金服全新一代數據可視化解決方案,主要包含「數據驅動的高交互可視化圖形語法」G2、本次開源的 G6、適於對性能、體積、擴展性要求嚴苛場景下使用的移動端圖表庫 F2 以及一套完整的圖表使用指引和可視化設計規範,致力於提供一套簡單方便、專業可靠、無限可能的數據可視化最佳實踐。

G6 是 螞蟻金服-AntV 旗下的針對關係數據的可視化引擎。從 2016 年 12 月,G6 立項至今,已經過去了 1 年半的時間。在過去的時光裡,G6 直接或間接的支持了阿里經濟體近一百個業務系統。期間獲得過讚譽,也有吐槽,取得一定成就,也暴露過不少問題。

半年前,我們結合真實業務需求和業內成熟框架的特點,以及自己內心的丁點不安分創新,開啟了 G6 2.0 的開發工作,經過精心設計,以及與諸多業務方數月共同打磨。

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

開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

G6 名字的由來

開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

  • 流程圖,流流流,666,溜溜溜?
  • G2 叫 G two。G6 叫 G six ?
  • G 是圖形可以理解,6 跟關係數據有什麼關係?
  • ……

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

  1. G6 的 G 來自於 Graphic、Graph ,意味著我們要基於圖形技術做圖可視化;
  2. G6 的 6 來自於《六度分隔理論》,表達了我們對關係數據,關係網絡的敬畏和著迷;
  3. G6 念 G六

裂變

由於之前人力上和認識上的侷限,1.0 中我們強行把兩個場景全部揉在 G6 這一個庫裡,隨著業務的發展,G6 自身變得越來越臃腫,越來越矛盾,發展變得舉步維艱。團隊同學經過深入討論和思考,決定將 G6 一分為二,由此,G6 開始了工程上的裂變:

開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

幹活的程序員:這絕對是一個蠻大的架構變化,甚至從工程上談得上傷經動骨,陷入深坑,有條件要上,沒有條件創造條件也要上 ⊙﹏⊙

1.更完備

完備圖項

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

  • 群組
開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

  • 導引信息
開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

層級拍平

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

開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

2.更精簡、更清晰、更友好的接口設計

隨著 2.0 架構的升級,G6 沉為了底層的關係圖可視化引擎,其本身不提供(很少提供)上層建築(節點類型、邊類型、基礎交互、佈局算法)的具體實現,只提供一套高可擴展的機制。得益此次的減負,G6 優化了大量接口設計,如果用過 1.0,相信大家能明顯感受到接口更精簡,更自洽,概念更清晰。詳見鏈接(請將網址複製至瀏覽器中即可查看,下同) :

https://antv.alipay.com/zh-cn/index.html

3.開放插件擴展

為了更好的沉澱一些中等程度的、具體場景相關的工作,以及為了和社區更好的融合形成合力,G6 2.0 中我們開放了插件的擴展。詳見鏈接:

https://antv.alipay.com/zh-cn/index.html

聚變

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

這次,我們很高興的告訴大家,今天除了開源 G6 ,還會開放取得了階段性成果的 G6-Editor ! 詳見鏈接:

https://yuque.com/antv/g6-editor

1.與設計深入融合

開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

數據可視化可能一開始就跟美是分不開,而且我們又在 UED 部門,所以我們首先會想到和專業的設計同學深度融合。本次 G6-Editor 作為一個相對上層的中間件,其對外輸出的一半是工程,另一半是設計。

2.與產品深度融合

為了避免 G6-Analyser 和 G6-Editor 成為工程師閉門造車的產物。在打造這兩個技術產品時,我們會和內部大量的商業產品深入合作,對各個交互細節反覆推敲。最終將經過成熟的思考的結論內化到 G6 技術棧。

  • 語雀腦圖(內測中)
開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

  • 內部分析應用 -- 河流圖(數據虛構)
開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

  • 內部分析應用 -- 流量網圖(數據虛構)
開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

開源●寄語

幾經努力 G6 終於也走上了開源之路,心中小辛酸根本難掩內心深處的喜悅。希望開源之後我們能夠更好的回饋社區,更好的從社區中汲取養分!希望大家在使用過程中多看文檔,善研代碼,勤提PR,互幫互助,提有深度和有建設性的建議。期待與大家共同努力,共同成長,共同進步~!

項目地址

官網:https://antv.alipay.com/zh-cn/g6/

github:https://github.com/antvis/g6

最後

夾帶幾個私貨:

《史上最6的可視化大賽》

https://yuque.com/antv/blog/g6-competition

《知乎?哲也!》

https://yuque.com/youtian/tgg2zw

求賢若渴,如有意加入 AntV 請發送郵件至:[email protected]

開源|螞蟻金服開源:關係數據的可視化引擎 G6 2.0

— END —

螞蟻金服科技,只為分享乾貨

您的轉發是對我們最大的支持

歡迎在文章下方留言與我們進行交流哦~


分享到:


相關文章: