話不多說，先上地址：
GitHub：https://github.com/antvis/g2
官網：https://g2.antv.vision/
介紹
G2 是一套面向常規統計圖表，以數據驅動的高交互可視化圖形語法。
全面擁抱 TypeScript
我們使用 TypeScript 重寫了 G2 以及其相關的所有模塊，並提供了完整的類型定義文件。
類型定義
繪圖引擎升級，多引擎切換
G 是 AntV 旗下一款易用、高效、強大的 2D 可視化渲染引擎，提供 Canvas、SVG 等多種渲染方式的實現。
新發布的4.0，給我們帶來了Canvas、SVG 多渲染模式支持、局部刷新、動畫體驗增強等多種利好。
渲染
更新機制引入
在 G2 之前的版本中，數據初始化和數據更新的流程本質上一樣，區別僅在於後者需要把之前的圖形清理掉，所以在數據更新之後，圖形元素都是重新創建的，與數據更新前的圖形元素無法進行關聯，這就對動畫、以及交互的一致性造成了影響。所以我們在 4.0 中引入了更新機制，包括：
- Geometry 的數據更新，為此我們引入了 Element 概念；
- 可視化組件的更新。
示例一：在圖表發生數據更新後，數據更新前的圖形元素並沒有被銷燬，我們仍然可以對更新前取到的 Element 實例進行操作。
示例二：更新機制的加入，細化了數據的處理流程，為圖表的細粒度動畫提供了基礎。以下動態條形圖，當每次數據發生更新時，座標軸文本 Axis、圖形文本標註 Label、幾何圖形 Geomtry等圖表元素，均可在更新階段定製對應的動畫。
機制
可視化組件體系升級
結合 AntV 下各個產品：G2、F2、G6、L7 的需求，我們重新設計了圖表組件，形成了功能更強，自由度更高，擴展性更好，面向交互的可視化組件體系。在兼容 3.x 功能的基礎上，增加了動畫、約束性佈局以及交互等功能。
圖例及座標軸文本自適應
Tooltip 座標系自適應
自適應
強大的 View 模塊
View 是擁有獨立數據源，並且能夠繪製多個圖形的容器。相比於 3.x，4.0 中 Chart 和 View 的職責發生了一些變化：View 是 G2 的畫布容器，負責子 View、幾何標記以及可視化組件的管理，而 Chart 是繼承 View，直接暴露給開發者的便捷使用入口，在 4.0 中，用戶可以根據自己業務的定製需求，使用 View 去開發個性化的數據多維分析圖形。另外我們還支持了 View 嵌套以及組件自動佈局。
支持各種場景下的自動佈局：數據更新、圖表尺寸變化、座標系變換以及圖表組件位置更新等。
全新的交互語法
G2 4.0 開始，我們從底層的 G 4.0 開始重構事件的實現，可視化組件層統一接口和事件機制，G2 層 Geometry 拆分出 Element 以適應新的交互機制，當這一切就緒，交互語法的新篇章終於開啟 。
交互語法
我們將交互行為拆分成一個個交互環節，而每個交互環節又由一個個觸發對象和反饋對象組成，通過對觸發對象和反饋對象的拼裝組合，我們就可以搭建出各種各樣的交互行為，而交互行為之間又可以進行疊加使用。
以鼠標 hover 圖形，圖形高亮為例，該交互行為由兩個交互環節組成：
1. 交互環節 1：鼠標滑入圖形元素，圖形元素高亮
2. 交互環節 2: 鼠標滑出圖形元素，圖形元素恢復原始狀態
對以上描述，我們可以分析出每個交互環節的觸發對象、觸發事件、反饋對象以及結果，如下：
於是我們就可以使用交互語法進行組裝：
通過這一套交互語法，我們為 G2 組裝配置了豐富的交互行為，方便用戶快速上手使用。
將來我們將會嘗試讓交互語法會更加自然化，讓用戶可以通過更加符合文法的方式進行使用。
細粒度的動畫
得益於更新機制的引入，G2 4.0 的動畫配置更加細粒度，在原有 Geometry 動畫的基礎上，用戶還可以對圖表組件（Axis、Annotation 等）及 Label 文本標註進行動畫配置。於此同時，我們還優化了各個 Geometry 的內置動畫。
折線
『暗黑』主題
在圖表主題上，G2 4.0 做了一次設計的升級，同時新增了 'dark' 主題。
主題
靈活的擴展機制
G2 4.0 重新設計並統一了各個核心模塊的擴展機制，相比 3.x 版本，粒度更新，機制更靈活，用戶可以基於最核心的模塊，按需加載需要的功能模塊，包括自定義 Shape、主題、交互、組件、動畫等，具體使用請閱讀按需引用教程。
除了以上變化之外，我們還對 API 進行了大量的優化，在最大程度兼容 3.x 語法的基礎上，提供了對用戶更加友好，更易理解的函數命名以及更合理的配置項結構，同時還對教程及 API 文檔進行了重構。歡迎訪問 G2 官網瞭解更多細節內容。
其他
其他問題，請移步官網。
閱讀更多 項目管理聯盟 的文章
關鍵字: 設計 可視化技術 TypeScript
