[小心得]環形布局（Circle Layout）圖

一、 什麼是環形布局圖，簡稱環形圖

環形圖是具有如下特徵的可視化圖形：（1）圖被分割多個簇（2）每個簇的節點放置在多個嵌入圓的圓周上;（3）如果有邊存在，每條邊都畫成一條直線。

很多應用程序通過環形圖來增強表現效果，例如環形布局技術應用在計算機通信、計算機網路拓撲結構或者社交網路中，以顯示信息結構的集群特點。具體應用場景：

（1） 將邊個數最多的Node作為圓心，使用環形布局是整體效果顯得不那麼擁擠，同時符合對稱審美的要求，如下圖1-1（A)所示。

（2） 在社交網路中，完全圖是一個簡單的無向圖，n個頂點的完全圖具有n個頂點以及n（n-1）/2條邊，保證每對頂點之間都恰有一條邊的圖。使用環形布局圖能相對清晰的反應出數據之間的關係，如下圖1-1（B)所示。

圖1-1 環形布局圖，（A) 邊個數最多的Node為圓心效果圖，（B) 20個節點的完全圖

二、 環形布局實現過程

2.1 多聚合環形布局的計算過程

在實際的業務中，我們會對原始數據進行分組，然後針對組內的數據進行多樣的化的可視化，如何力引導布局圖、樹狀布局圖、打包布局圖等。設計該計算過程的要求包括（1）具有節點的權重區分的可視化效果；（2）支持多聚合環形布局，多個環形圖可以自左向右，也可以自上而下依次排列；（3）聚焦到單個環形圖，一個聚合集合內的節點被放置在圓環上，並且整體具有美觀性，佔用空間少。基於此，我們設計了多聚合環形布局計算方法，具體如下：

演算法：CIRCULR-with More Group

輸入：分組之後的節點集合G

輸出：具有位置相關信息的節點集合G

For Each group p in P

(1) 計算每個group內的節點坐標getEachNodePosition

(1.1) 計算當前group內，環形中所有層的節點數calculateLayerNumber

(1.2) 計算當前group內，每一個層的位置信circleEachLayerLayout

(2) 根據當前group信息，整體平移當前組內的所有節點

如下圖2-1所示多聚合布局效果圖中，環形圖組與組之間自左向右依次排列，也支持自上到下依次排列，共涉及3個組，每組內的節點數分別為22、6和3。

圖2-1 多聚合布局效果圖，環形圖組與組之間自左向右排列

2.2 具有節點的權重區分的可視化效果

數據屬性也是可視化的對象之一，那麼節點的權重如何體現在環形圖可視化元素中，我們可以顏色深淺或者節點圓的大小表示。如果使用節點圓的大小映射其權重信息，設計思路下圖2-2所示，v表示待布局的節點的圓的圓心位置，每個節點圓具有默認的半徑信息，w和u分別為節點的startAngle和endAngle，結合節點圓所在圓的半徑，可以將節點圓半徑控制(0,默認圓半徑r]自由控制，同時計算信息還將添加的節點屬性上，如下圖2-3所示。

圖2-2 布局計算原理圖

圖2-3 布局計算之後的值

圖2-4 節點圓引入權重影響節點圓半徑的對比圖

2.3 外層節點控制

如果不處理環形圖中最外層環上的節點，當外層上節點不填充整個環，會出現不夠美觀情況。為了保證整體對稱性，提供兩種方式節點控制方式，其一，節點圓均勻分布在外環上；其二，外層環上的節點圓與臨近的內環合併。兩種策略的效果圖如下圖2-5所示。

圖2-5 外層節點控制策略效果對比圖（A）均勻分布，(B) 外層環上的節點圓與臨近的內環合併

參考代碼：https://codepen.io/swustlqsh/pen/bLOoaj