螞蟻金服視覺化圖形語法 G2 3.3 釋出：琢·磨

螞蟻金服_AntV發表於2018-10-17

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

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

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

圖表元件整體升級

G2 3.3版本里，我們重構了所有圖表元件，包括圖例（legend）、提示資訊（tooltip）、文字標籤（label）、座標軸（axis）和輔助資訊（guide），梳理並簡化了元件的生命流程，以此為基礎為元件帶來更優化的樣式和互動，並擴充了更多功能。以下提到的元件升級都可以在官網 demo 裡看到。

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

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


文字防覆蓋	強調回撥函式	靈活定位

提示資訊（tooltip）增強

tooltip 此前都是 HTML 版本，本次補充了 G（Canvas 和 SVG）版本，也就是支援匯出的版本。另外，HTML 版本也做了進一步加強，可以更輕鬆地定製出更多效果。


G 版本	HTML Content

固定位置	Mini Tooltip

圖例（legend）的擴充套件

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


Color	Size	HTML	翻頁

座標軸（axis）的新功能

axis 元件的 label 目前增加了兩個方向的 offset 支援，因此，在小型圖表中，可以實現座標軸文字內嵌了。

6個精品案例

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

致敬和探索

3.3版本里，geom 的大家庭裡又多了一位成員，小提琴圖（violin）。向 vega、ggplot2 兩位前輩致敬，希望 G2 實現的版本也能為統計世界裡這個經典的圖表帶來不一樣的體驗：連結。

另一方面基於3.3提供的更完善的圖形語法能力，這段時間我們做了視覺化 storytelling 案例《泰坦尼克號資料集可視分析》。我們把這個案例錄製成了視訊：連結。

另一個案例是這次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+。大家的信任，讓我們倍感喜悅，同時肩上也揹負起沉甸甸的責任。希望未來的日子裡，我們繼續互相激勵互相提攜，做出更優秀的視覺化產品來。