可視化框架設計-座標系

座標系

• 座標系的簡介
• 座標系和圖形
• 座標系和視覺通道
• 座標系的變化
• 座標系的接口設計
• 更多

座標系的簡介

前面的章節中咱們介紹過了視覺通道,視覺通道中識別度最高，同時支持定性（分類）數據和定量數據的視覺通道是位置(position)。各類幾何標記最大的差別就在於數據空間位置的映射，咱們將這個空間定義成座標系。常見的座標系：

• 直角座標系（笛卡爾座標系），有幾個互相垂直的向量構成的空間，G2中當前實現的是x,y兩個基底向量構成的二維直角座標系，三維座標系後面的版本中提供。
• 極座標系，是使用一個角度值和長度值構成的座標系，使用x軸表示角度，y軸表示半徑的長度。
• 質心座標系，使用三角形的三個頂點求得座標點 u,v,w，且w = 1-u-v，這個座標系在三維繪圖中普遍使用。

G2中主要實現了直角座標系和極座標系，座標系主要完成了兩個功能：

• 將 0-1 區間內的數據映射到畫布空間
• 將畫布空間的數據，翻轉回0-1的範圍內

實現的座標系

• rect 直角座標系，目前僅支持二維
• polar 極座標系，角度和半徑構建成的二維座標系
• plus 一種存在空心的極座標系，半徑不是從圓心開始，構建出來的座標系
• theta 一種特殊的極座標系，半徑長度固定，僅僅將數據映射到角度，經常使用於實現餅圖
• map 地圖相關的座標系，地圖須要將球形上的數據映射到二維平面上，因此會提供一些投影算法，這個座標系咱們在 地圖章節中詳細的介紹。

座標系和圖形

可視化編碼的兩個核心組成部分：幾何標記和視覺通道。視覺通道咱們已經在前面的章節中介紹過,幾何標記咱們將在後面的章節中介紹。咱們以直角座標系下的柱狀圖爲例，講解幾何標記在直角座標系和極座標系下的不一樣視覺效果。

直角座標系

柱狀圖在直角座標系下，由四個點構建成的矩形構成：

• 在直角座標系下，柱狀圖通常使用x軸方向映射數據的分類，y軸方向映射數據的大小。

極座標系

柱狀圖到了極座標下，依然由四個點鏈接而成，變化僅僅在於到圓心距離相等的兩個點間的直線變成圓弧：

• 在極座標系下，柱狀圖就天然而然的轉換成爲了玫瑰圖

可視化的過程是數據到圖形的映射過程，只要數據映射的通道一致，那麼咱們就可使用一種方式將幾何圖形在不一樣的座標系下繪製出來。

層疊柱狀圖到嵌套環圖

下面的柱狀圖全部的項累加起來是100%，佔用了所有的高度，各項層疊。

• 分類只有一個，x軸用於區分分類，y軸表示數據的大小

此時咱們將座標系轉換成極座標系:

• 因爲分類只有一個，因此佔有了整個圓環，y軸表示數據的大小

層疊柱狀圖到餅圖

依然是上面的示例，咱們將x軸、y軸置換，y軸表示數據的分類，x軸表示數據的大小：

此時咱們將座標系轉換成極座標系：

餅圖就生成了，此時若是咱們使用兩個分類的數據，會出現什麼效果？看下圖：

此時就生成了嵌套的餅圖

座標系和視覺通道

上面咱們講解了相同的幾何圖形在不一樣座標系下的不一樣展現效果，因爲直角座標系是兩個垂直向量構建而成的，視覺通道都是位置（postion）的兩個子通道（x,y)，而極座標，是由角度和長度兩個維度構建而成，角度和位置在視覺通道中的表現力有所差別：

因此在使用圖形和座標系時須要理解清晰數據字段和視覺通道的映射關係，在合適的場景選擇合適的視覺通道。

座標系的轉置

座標系能夠進行如下操做：

• translate: 平移,沿x,y軸方向移動
• rotate: 旋轉，默認按照座標系中心旋轉
• scale: 放大、縮小，默認按照座標系中心放大、縮小

• transpose: x,y軸交換，例如柱狀圖轉換成水平柱狀圖（條形圖）

• reflect: 鏡像, 沿x方向鏡像或者沿y軸方向映射

  • x軸方向鏡像
  • y軸方向鏡像

座標系的接口設計

結合上面的內容，直角座標系和極座標系必須具備的屬性或接口：

• 在畫布上的範圍，須要指定起始點、結束點

• 將數據從0-1映射到畫布座標，將畫布上的座標反轉回數據0-1的範圍內

• 座標系的平移、旋轉、放大縮小、鏡像等轉置功能

屬性

屬性名	含義
start	座標系的起始點
end	座標系的結束點

方法

方法名	含義
convert(point)	將數據從0-1空間映射到畫布空間
invert(point)	將數據從畫布空間反轉回0-1空間
translate(x,y)	平移
rotate(angle)	旋轉
scale(sx,sy)	方法、縮小
transpose()	x,y交換
reflect(‘x’	‘y’)

極座標的特殊屬性

因爲極座標是由角度和半徑長度兩個維度共同構成的，因此有本身特有的屬性：

方法名	含義
radius	半徑長度，0-1範圍內的數值，最終的半徑長度 = min(長，寬) / 2 * radius
inner	plus座標系下，內部空白的半徑大小，空白的半徑 = min(長，寬) / 2 * inner
startAngle	極座標的起始角度
endAngle	極座標的結束角度

指定了起始角度、結束角度的玫瑰圖：

更多

本章介紹了常見的座標系及其功能，同時介紹了G2如何設計座標系，在G2中座標系和幾何標記是徹底正交的能夠自由搭配，後面的章節裏面會有更多的體現。下一章節開始幾何標記的介紹

G2網站：https://g2.alipay.com/