G2 簡介

G2 是一套基于圖形語法理論的可視化底層引擎，以數(shù)據(jù)驅(qū)動(dòng)，提供圖形語法與交互語法，具有高度的易用性和擴(kuò)展性。使用 G2，你可以無需關(guān)注圖表各種繁瑣的實(shí)現(xiàn)細(xì)節(jié)，一條語句即可使用 Canvas 或 SVG 構(gòu)建出各種各樣的可交互的統(tǒng)計(jì)圖表。

特性

?? 完善的圖形語法：數(shù)據(jù)到圖形的映射，能夠繪制出所有的圖表。

?? 全新的交互語法：通過觸發(fā)和反饋機(jī)制可以組合出各種交互行為，對(duì)數(shù)據(jù)進(jìn)行探索。

?? 強(qiáng)大的 View 模塊：可支持開發(fā)個(gè)性化的數(shù)據(jù)多維分析圖形。

?? 雙引擎渲染：Canvas 或 SVG 任意切換。

?? 可視化組件體系：面向交互、體驗(yàn)優(yōu)雅。

?? 全面擁抱 TypeScript：提供完整的類型定義文件。

G2 設(shè)計(jì)思路

01可視化框架的構(gòu)成

數(shù)據(jù)可視化的本質(zhì)是：將數(shù)據(jù)映射到圖形，同時(shí)增加一些輔助信息，讓用戶讀懂?dāng)?shù)據(jù)。

根據(jù)這一點(diǎn)我們可以推導(dǎo)出一個(gè)可視化框架需要四部分：

數(shù)據(jù)處理模塊，對(duì)數(shù)據(jù)進(jìn)行加工的模塊，包括一些數(shù)據(jù)處理方法。例如：合并、分組、排序、過濾、計(jì)算統(tǒng)計(jì)信息等。

圖形映射模塊，將數(shù)據(jù)映射到圖形視覺通道的過程。例如：將數(shù)據(jù)映射成顏色、位置、大小等。

圖形展示模塊，決定使用何種圖形來展示數(shù)據(jù)，點(diǎn)、線、面等圖形標(biāo)記。

輔助信息模塊，用于說明視覺通道跟數(shù)據(jù)的映射關(guān)系，例如：坐標(biāo)軸、圖例、輔助文本等。

02G2 的框架結(jié)構(gòu)G2 實(shí)現(xiàn)了上面的四個(gè)模塊，并且對(duì)著四個(gè)模塊做了更進(jìn)一步的細(xì)分，另外還針對(duì)圖表交互，實(shí)現(xiàn)了交互語法模塊。

03數(shù)據(jù)處理模塊

數(shù)據(jù)處理模塊已經(jīng)從 G2 中獨(dú)立出來，作為 DataSet 模塊單獨(dú)提供，主要包含下面幾個(gè)模塊：

DataSet，包含多個(gè) DataView,管理多個(gè)數(shù)據(jù)源。

DataView，每個(gè) DataView 對(duì)應(yīng)一個(gè)數(shù)據(jù)源，可以進(jìn)行布局（Layout)、數(shù)據(jù)加工（Transform)。

Layout：對(duì)數(shù)據(jù)進(jìn)行布局。

Transform：對(duì)數(shù)據(jù)進(jìn)行加工、統(tǒng)計(jì)等處理，包括對(duì)地圖數(shù)據(jù)的處理。

04圖形映射模塊

圖形映射模塊完成了將數(shù)據(jù)映射到數(shù)學(xué)空間[0-1]，再從數(shù)學(xué)空間映射到畫布空間的整個(gè)過程，主要包括三個(gè)模塊：

Scale， 將數(shù)據(jù)映射到 0-1 之間，方便映射到畫布上。

Attribute，圖形屬性，數(shù)據(jù)映射到圖形的屬性（視覺通道），包括位置、顏色、大小、形狀等。

Coordinate，展示圖形需用到的坐標(biāo)系，將數(shù)據(jù)映射到位置的屬性（視覺通道）。

05輔助信息

輔助信息用于標(biāo)示數(shù)據(jù)在各種圖形屬性上的映射，使得用戶更容易的理解數(shù)據(jù)，主要包括下面幾個(gè)模塊：

Axis?坐標(biāo)軸，輔助用戶識(shí)別圖形所在的位置，判斷數(shù)據(jù)大小的輔助元素。

Tooltip?提示信息，用戶鼠標(biāo)在畫布上移動(dòng)時(shí)，實(shí)時(shí)出現(xiàn)的鼠標(biāo)附近的數(shù)據(jù)信息。

Annotation?其他輔助元素，可以在圖上添加輔助的文本、輔助圖片、輔助線等，增強(qiáng)用戶對(duì)圖形的認(rèn)知。

Legend?圖例，輔助用戶識(shí)別圖形的大小、顏色、形狀，通常用于判斷數(shù)據(jù)對(duì)應(yīng)圖形的分類。

06圖形展示

• Chart 圖表，展示圖形的入口，會(huì)生成一個(gè)畫布，同時(shí)管理數(shù)據(jù)到圖形映射的所有周期。

  View 視圖，一個(gè)畫布上可以顯示多張圖表，每個(gè)圖表有各自的繪圖區(qū)域、數(shù)據(jù)源、坐標(biāo)系等信息。

  Geometry，數(shù)據(jù)映射到的圖形標(biāo)識(shí)，G2 中的圖形標(biāo)識(shí)有：點(diǎn)、線、路徑、面積、多邊形等。

  Element，在 G2 中，我們會(huì)將數(shù)據(jù)通過圖形語法映射成不同的圖形，比如點(diǎn)圖，數(shù)據(jù)集中的每條數(shù)據(jù)會(huì)對(duì)應(yīng)一個(gè)點(diǎn)，柱狀圖每條數(shù)據(jù)對(duì)應(yīng)一個(gè)柱子，線圖則是一組數(shù)據(jù)對(duì)應(yīng)一條折線，Element 即一條/一組數(shù)據(jù)對(duì)應(yīng)的圖形元素，它代表一條數(shù)據(jù)或者一個(gè)數(shù)據(jù)集，在圖形層面，它可以是單個(gè) Shape 也可以是多個(gè) Shape，我們稱之為圖形元素。

  Shape，更加細(xì)分的圖形標(biāo)識(shí)，例如，點(diǎn)可以分為圓點(diǎn)、正方形、十字等，線可以分為點(diǎn)線、折線、曲線等。

07數(shù)據(jù)到圖形映射的流程可視化從數(shù)據(jù)映射到圖形需要以下流程：

• 原始數(shù)據(jù)：加載到頁面上的 JSON 數(shù)組。

  統(tǒng)計(jì)分析：統(tǒng)計(jì)函數(shù)加工數(shù)據(jù)。

  預(yù)處理數(shù)據(jù)：每個(gè)視圖接收到的數(shù)據(jù)。

  過濾：行過濾，列過濾（是否保存整條數(shù)據(jù)，后面討論）。

  關(guān)注數(shù)據(jù)： 對(duì)數(shù)據(jù)進(jìn)行行列的過濾，當(dāng)前圖表關(guān)注的數(shù)據(jù)。

  映射：將數(shù)據(jù)從數(shù)值域轉(zhuǎn)換幾何屬性。

  繪制：調(diào)用繪圖庫，繪制出圖形。

  圖形數(shù)據(jù)：最終形成的圖表。

08G2 數(shù)據(jù)轉(zhuǎn)換流程

G2 的數(shù)據(jù)映射到圖形的過程整體上遵循這個(gè)流程，但是細(xì)節(jié)上有所增加：

幾個(gè)大的流程：

• 對(duì)數(shù)據(jù)進(jìn)行預(yù)處理，這部分工作是在圖表的外部進(jìn)行的，都包含在 DataSet 包中的數(shù)據(jù)處理模塊中。

  圖表對(duì)數(shù)據(jù)進(jìn)行初步的處理，對(duì)數(shù)據(jù)進(jìn)行格式化成數(shù)字、調(diào)整數(shù)據(jù)等操作。

  將數(shù)據(jù)映射到數(shù)學(xué)空間[0-1] 中，然后再映射到各個(gè)圖形屬性，并繪制圖形。

小流程的簡介：

• transform，DataSet 模塊中可以使用多個(gè) transform 對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換，包括過濾、補(bǔ)零、排序、統(tǒng)計(jì)、地圖數(shù)據(jù)處理、地理映射等。

  過濾，對(duì)數(shù)據(jù)進(jìn)行過濾，可以設(shè)置一些過濾條件，控制數(shù)據(jù)的展示。

  數(shù)字化，將分類類型，時(shí)間類型的數(shù)據(jù)轉(zhuǎn)換成數(shù)字，為了可以執(zhí)行“數(shù)據(jù)調(diào)整”,調(diào)整圖形在畫布上的位置。

  數(shù)據(jù)調(diào)整，為了更清晰的展示數(shù)據(jù)，圖形有時(shí)候需要層疊、分組、散開等，此時(shí)需要對(duì)數(shù)據(jù)進(jìn)行調(diào)整 。

  統(tǒng)一度量，度量包含了數(shù)據(jù)字段的信息，例如連續(xù)字段的最大值、最小值等信息，分類字段包含的分類，數(shù)據(jù)一旦進(jìn)行調(diào)整，那么度量中的信息不再準(zhǔn)確，所以需要進(jìn)行度量的調(diào)整，同時(shí)存在多層圖表的情況，例如在地圖上顯示點(diǎn)圖時(shí)，這是需要多個(gè)數(shù)據(jù)源，但是用于表示位置的經(jīng)緯度信息的范圍必須進(jìn)行統(tǒng)一。

  歸一化，將數(shù)據(jù)的值映射到數(shù)學(xué)空間 0-1 空間內(nèi)，方便數(shù)據(jù)到圖形屬性（視覺通道）的映射。

  計(jì)算圖形需要的點(diǎn)，繪制圖形時(shí)需要多個(gè)點(diǎn)，例如繪制一個(gè)柱狀圖，需要 4 個(gè)點(diǎn)，如果將坐標(biāo)系轉(zhuǎn)換，仍然是這 4 個(gè)點(diǎn)，僅僅是連接點(diǎn)的方式不同，就會(huì)生成不同的圖表。

• 映射，將數(shù)據(jù)映射到圖形空間的視覺通道。

  繪制，繪制完成所有的圖形。