螞蟻金服可視化圖形語法 G2 3.3 發佈：琢·磨

時間 2019-11-11

標籤螞蟻可視化圖形語法 g2 3.3 發佈简体版

原文原文鏈接

更好的閱讀體驗，請移步語雀html

G2 是螞蟻金服數據可視化解決方案 AntV 的一個子產品，是一套數據驅動的、高交互的可視化圖形語法。

通過兩個多月密鑼緊鼓的開發，400+次提交，G2 3.3版本今天終於和你們見面了。自上次3.2版本發佈以來，咱們收到很多圖表組件相關的需求和吐槽，團隊的工程師們和設計師們傾力合做，爲你們帶來更豐富、體驗更好的圖表組件。同時，3.3版本爲 G2 帶來新的圖表成員：小提琴圖，併爲你們帶來官方精選的圖表案例。webpack

圖表組件總體升級

G2 3.3版本里，咱們重構了全部圖表組件，包括圖例（legend）、提示信息（tooltip）、文本標籤（label）、座標軸（axis）和輔助信息（guide），梳理並簡化了組件的生命流程，以此爲基礎爲組件帶來更優化的樣式和交互，並擴充了更多功能。如下提到的組件升級均可以在官網 demo 裏看到。git

標籤（label）的痛點改進和加強

針對性地對地圖、散點圖和 treemap 作了 label placement 相關防覆蓋的處理。github


文本防覆蓋	強調回調函數	靈活定位

提示信息（tooltip）加強

tooltip 此前都是 HTML 版本，本次補充了 G（Canvas 和 SVG）版本，也就是支持導出的版本。另外，HTML 版本也作了進一步增強，能夠更輕鬆地定製出更多效果。web


G 版本	HTML Content

固定位置	Mini Tooltip

圖例（legend）的擴展

legend 作了大量的功能擴展和樣式調整，比較值得一提的是 color / size / html 和翻頁 legend。canvas


Color	Size	HTML	翻頁

座標軸（axis）的新功能

axis 組件的 label 目前增長了兩個方向的 offset 支持，所以，在小型圖表中，能夠實現座標軸文本內嵌了。ide

6個精品案例

根據業務的關聯性和複用性，咱們提煉了大量的精品 demo 案例，後續會逐步開放，這一期更新了6個折線圖。函數

致敬和探索

3.3版本里，geom 的你們庭裏又多了一位成員，小提琴圖（violin）。向 vega、ggplot2 兩位前輩致敬，但願 G2 實現的版本也能爲統計世界裏這個經典的圖表帶來不同的體驗：連接。優化

另外一方面基於3.3提供的更完善的圖形語法能力，這段時間咱們作了可視化 storytelling 案例《泰坦尼克號數據集可視分析》。咱們把這個案例錄製成了視頻：連接。ui

另外一個案例是此次3.3發佈前咱們用 webpack-visualizer 對 G2 的打包模塊進行了可視化分析，排查 Webpack 打包過程當中存在的重複、冗餘的依賴庫。最終咱們用 G2 實現了一個版本：連接。

特別感謝

3.3版本的迭代中，咱們很欣喜地看到，有愈來愈多開源社區的小夥伴加入到了 G2 的貢獻者行列中來。感謝你們的鼎力支持，G2 很是榮幸能和你們一路同行！（如下貢獻者排名不分前後）


liunan	Li Ruo Nan	賴小賴	zzzzy

更要感謝廣大用戶對 G2 的青睞，據不徹底統計，自 G2 17年11月22開源至今，使用 G2 的系統數字已經由1.1k+增加到目前的8.5k+，G2 在 github 上的 star 數也由0.7k+增加到目前的6.3k+。你們的信任，讓咱們倍感喜悅，同時肩上也揹負起沉甸甸的責任。但願將來的日子裏，咱們繼續互相激勵互相提攜，作出更優秀的可視化產品來。