G2 是一套面向常規(guī)統(tǒng)計圖表，以數據驅動的高交互可視化圖形語法。它是 AntV 旗下一款易用、高效、強大的 2D 可視化渲染引擎，提供 Canvas、SVG 等多種渲染方式的實現(xiàn)。

經歷了為期半年的大規(guī)模底層重構和開發(fā)迭代，G2 4.0 終于和大家見面了。作為繼 2017 年 11 月 22 日 G2 3.0 正式開源發(fā)布以來 G2 的第二次大版本發(fā)布，4.0 版本仍堅守著『打造數據驅動的高交互圖形語法』的初心，在圖形語法的基礎上，新增了交互語法，同時在產品的功能、體驗、易用性和靈活性等各個方面進行了全面提升。

全新的 4.0嚴格意義上來說，這并不是一次重構，而是一次大規(guī)模的重寫，我們自底向上，從代碼到文檔，構建了全新的 G2。全面擁抱 TypeScript

我們使用 TypeScript 重寫了 G2 以及其相關的所有模塊，并提供了完整的類型定義文件。

繪圖引擎升級，多引擎切換

隨著 AntV 底層渲染引擎 G 4.0 的發(fā)布，為 G2 4.0 帶來了Canvas、SVG 多渲染模式支持、局部刷新、動畫體驗增強等多種利好。

更新機制引入

在 G2 之前的版本中，數據初始化和數據更新的流程本質上一樣，區(qū)別僅在于后者需要把之前的圖形清理掉，所以在數據更新之后，圖形元素都是重新創(chuàng)建的，與數據更新前的圖形元素無法進行關聯(lián)，這就對動畫、以及交互的一致性造成了影響。所以我們在 4.0 中引入了更新機制，包括：

Geometry 的數據更新，為此我們引入了 Element 概念；

可視化組件的更新。

示例一：在圖表發(fā)生數據更新后，數據更新前的圖形元素并沒有被銷毀，我們仍然可以對更新前取到的 Element 實例進行操作。

示例二：更新機制的加入，細化了數據的處理流程，為圖表的細粒度動畫提供了基礎。以下動態(tài)條形圖，當每次數據發(fā)生更新時，坐標軸文本 Axis、圖形文本標注 Label、幾何圖形 Geomtry等圖表元素，均可在更新階段定制對應的動畫。

可視化組件體系升級

結合 AntV 下各個產品：G2、F2、G6、L7 的需求，我們重新設計了圖表組件，形成了功能更強，自由度更高，擴展性更好，面向交互的可視化組件體系。在兼容 3.x 功能的基礎上，增加了動畫、約束性布局以及交互等功能。

圖例及坐標軸文本自適應

Tooltip 坐標系自適應

強大的 View 模塊

View 是擁有獨立數據源，并且能夠繪制多個圖形的容器。相比于 3.x，4.0 中 Chart 和 View 的職責發(fā)生了一些變化：View 是 G2 的畫布容器，負責子 View、幾何標記以及可視化組件的管理，而 Chart 是繼承 View，直接暴露給開發(fā)者的便捷使用入口。

在 4.0 中，用戶可以根據自己業(yè)務的定制需求，使用 View 去開發(fā)個性化的數據多維分析圖形。另外我們還支持了 View 嵌套以及組件自動布局。

支持各種場景下的自動布局：數據更新、圖表尺寸變化、坐標系變換以及圖表組件位置更新等。

全新的交互語法

G2 4.0 開始，我們從底層的 G 4.0 開始重構事件的實現(xiàn)，可視化組件層統(tǒng)一接口和事件機制，G2 層 Geometry 拆分出 Element 以適應新的交互機制，當這一切就緒，交互語法的新篇章終于開啟。

我們將交互行為拆分成一個個交互環(huán)節(jié)，而每個交互環(huán)節(jié)又由一個個觸發(fā)對象和反饋對象組成，通過對觸發(fā)對象和反饋對象的拼裝組合，我們就可以搭建出各種各樣的交互行為，而交互行為之間又可以進行疊加使用。

以鼠標 hover 圖形，圖形高亮為例，該交互行為由兩個交互環(huán)節(jié)組成：

1. 交互環(huán)節(jié) 1：鼠標滑入圖形元素，圖形元素高亮

2. 交互環(huán)節(jié) 2: 鼠標滑出圖形元素，圖形元素恢復原始狀態(tài)

對以上描述，我們可以分析出每個交互環(huán)節(jié)的觸發(fā)對象、觸發(fā)事件、反饋對象以及結果，如下：

于是我們就可以使用交互語法進行組裝：

通過這一套交互語法，我們?yōu)?G2 組裝配置了豐富的交互行為，方便用戶快速上手使用。

將來我們將會嘗試讓交互語法會更加自然化，讓用戶可以通過更加符合文法的方式進行使用。

細粒度的動畫

得益于更新機制的引入，G2 4.0 的動畫配置更加細粒度，在原有 Geometry 動畫的基礎上，用戶還可以對圖表組件（Axis、Annotation 等）及 Label 文本標注進行動畫配置。于此同時，我們還優(yōu)化了各個 Geometry 的內置動畫。

『暗黑』主題

在圖表主題上，G2 4.0 做了一次設計的升級，同時新增了 'dark' 主題。

靈活的擴展機制

G2 4.0 重新設計并統(tǒng)一了各個核心模塊的擴展機制，相比 3.x 版本，粒度更新，機制更靈活，用戶可以基于最核心的模塊，按需加載需要的功能模塊，包括自定義 Shape、主題、交互、組件、動畫等，具體使用請閱讀按需引用教程。

除了以上變化之外，我們還對 API 進行了大量的優(yōu)化，在最大程度兼容 3.x 語法的基礎上，提供了對用戶更加友好，更易理解的函數命名以及更合理的配置項結構，同時還對教程及 API 文檔進行了重構。