坐標系
- 坐標系的簡介
- 坐標系和圖形
- 坐標系和視覺通道
- 坐標系的變化
- 坐標系的接口設計
- 更多
坐標系的簡介
前面的章節中我們介紹過了視覺通道,視覺通道中識別度最高，同時支持定性（分類）數據和定量數據的視覺通道是位置(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中坐標系和幾何標記是完全正交的可以自由搭配，后面的章節里面會有更多的體現。下一章節開始幾何標記的介紹