整體思路
- 可視化框架的構成
- G2的框架結構
- 數據圖形映射的流程
可視化框架的構成
數據可視化的本質是：將數據映射到圖形，同時將一些附加信息傳達給用戶。
一個可視化框架需要四部分：
* 數據處理模塊，對數據進行加工的模塊，包括一些數據處理方法。例如：合並、分組、排序、過濾、計算統計信息等
* 圖形映射模塊，將數據映射到圖形視覺通道(后面章節介紹)的過程。例如：將數據映射成顏色、位置、大小等
* 圖形展示模塊，決定使用何種圖形來展示數據，點、線、面等圖形標記
* 輔助信息模塊，用於說明視覺通道跟數據的映射關系，例如：坐標軸、圖例、輔助文本等
G2的框架結構
G2實現了上面的四個模塊，並且對着四個模塊做了更進一步的細分：
這些細分的模塊在單獨的章節中各自介紹：
- DataFrame 數據的處理模塊，常見的數據處理方法
- Stat 對數據進行統計的模塊，min,max,mean等常見的統計
- Scale 將數據映射到0-1之間，方便映射到視覺通道
- Att，圖形屬性，數據映射到圖形的視覺通道，包括位置、顏色、大小、形狀等
- Coord 展示圖形需用到的坐標系，將數據映射到位置的視覺通道（屬性）
- View 視圖，一個畫布上可以顯示多張圖表，每個圖表有各自的繪圖區域、數據源、坐標系等信息
- Geom 數據映射到的幾何標識，G2中的幾何標識有：點、線、路徑、面積、多邊形等
- Shape更加細分的幾何標識的圖形，例如，點可以分為圓點、正方形、十字等，線可以分為點線、折線、曲線等
- Axis 坐標軸，輔助用戶識別圖形所在的位置，判斷數據大小的輔助元素
- Legend 圖例，輔助用戶識別圖形的大小、顏色、形狀，通常用於判斷數據對應圖形的分類
- Tooltip 提示信息，用戶鼠標在畫布上移動時，實時出現的鼠標附近的數據信息
- Guide其他輔助元素，可以在圖上添加輔助的文本、輔助圖片、輔助線等，增強用戶對圖形的認知。
數據圖形映射的流程
可視化從數據映射到圖形需要以下流程：
- 原始數據：加載到頁面上的JSON數組
- 統計分析：統計函數加工數據
- 預處理數據：每個視圖接收到的數據
- 過濾：行過濾，列過濾（是否保存整條數據，后面討論）
- 關注數據： 對數據進行行列的過濾，當前圖表關注的數據
- 映射：將數據從數值域轉換幾何屬性
- 繪制：調用繪圖庫，繪制出圖形
- 圖像數據：最終形成的圖表
g2的數據映射流程
G2的數據映射到圖形的過程整體上遵循這個流程，但是細節上有所增加：
幾個大的流程：
- G2的數據可以在外部處理完畢后傳入圖表中，統計函數也可以在外部執行
- View 中對數據進行初步的處理，對數據進行格式化成數字、調整數據等操作
- Core 核心層處理圖形的數據的映射
小流程的簡介：
- 統計，對數據進行統計處理，用戶可以在傳入G2的圖表前對數據進行統計，也可以將統計函數嵌入G2的語法中
- 過濾，對數據進行過濾，G2中圖例的操作也會引起數據的過濾
- view中設置數據源，單個視圖（view)擁有自己的數據源，多個View可以同時在一個畫布上出現，展示異構數據
-
過濾列，防止傳入數據的列數過多，僅過濾出參與語法的列
var data = [{a: '1',b: 'b',c: 'c1',d: 10}] // 數據中存在a,b,c,d四列 。。。 chart.point().position('a*b').color('c') // a,b,c參與了語法，所以d字段被過濾掉- 1
- 2
- 3
- 1
- 2
- 3
- 數字化，將分類類型，時間類型的數據轉換成數字,為了可以執行“數據調整”,調整圖形在畫布上的位置
-
數據調整，為了更清晰的展示數據，圖形有時候需要層疊、分組、散開等，此時需要對數據進行調整
-
訓練度量度量包含了數據字段的信息，例如連續字段的最大值、最小值等信息，分類字段包含的分類,數據一旦進行調整，那么度量中的信息不再准確，所以需要進行度量的訓練
- 歸一化，將數據的值映射到 0-1空間內，方便數據到視覺通道的映射
-
計算圖形需要的點，繪制圖形時需要多個點，例如繪制一個柱狀圖，需要4個點，如果將坐標系轉換，仍然是這4個點，僅僅是連接點的方式不同，就會生成不同的圖表
-
映射，將數據映射到圖形空間的視覺通道
- 繪制，繪制完成所有的圖形
更詳細的數據流程介紹和示例在后面的各類圖表中分別展示
更多
我們可以看到，在數據進行圖形映射的流程中，數據類型非常重要，不同的數據類型影響不同的映射方式，下一章節我們介紹數據分類和度量
G2 網站： https://g2.alipay.com/