繪圖演算法

為了讓使用者能夠以更多的角度來觀察資料，本介面主要採用三種 Layout 演算法：環狀（Ring）、Force-Directed 與 Chameleon。此外，網絡視覺化模組將 所有節點分為「CNodes（主要關鍵字，包含輸入的關鍵字 Q 與被點擊的關鍵字 C 的節點）」與「RNodes（與 Q、C 相關的節點）」兩種狀態，這是為了分辨哪些 關鍵字是目前使用者主要觀察的對象，而哪些是與以推薦幫助使用者瀏覽的相關 關鍵字。

一、 環狀演算法

將網絡圖以環狀的方式呈現，主要關鍵字通常為中心點，而相關的關鍵字以 類似圓圈的方式散開。相較於另外二種網絡繪圖演算法，環狀的呈現能夠簡單且 清楚地讓使用者去瀏覽主要關鍵字與相關關鍵字，所有關鍵字的位置互不重疊，

如同關鍵字列表的方式讓使用者逐一的瀏覽所有關鍵字。本介面將環狀佈局設定 為預設的呈現，這是為了先以較直接的方式給予使用者一個概觀，幫助更快速的 找到下一個瀏覽目標。而環狀呈現的缺點在於無法觀察陳列於環形上的相關關鍵 字之間的關係，簡單的來說，此繪圖規則所著重的在於陳列關鍵字，而非呈現關 鍵字的關係強弱或是子群。實際的實作方法如演算法 3 所示。

44 演算法 3 研究者自行設計的環形繪圖演算法。

propLength = nodeSize*2; {節點之間的適當距離為節點圓的半徑}

function getRadius() = {取得半徑距離}

begin

return data.nodes.related.length*propLength end;

{ 遞迴每個狀態為”Clicked”的節點 }

for each data.status = clicked begin for j=0 to data.length begin

{與 related 的節點保持適當的半徑距離}

if ( i != j AND data[i].status=related

AND distance(data[i].location, data[j].location)< getRadius() begin

Separate(data[i], data[j]);

end

{與 clicked 的節點保持適當距離}

else if ( i != j AND data[i].status=clicked

AND distance(data[i].location, data[j].location)< propLength begin

Separate(data[i], data[j]);

end end

end

{ 遞迴每個狀態為”Related”的節點 } propLength = nodeSize*2;

for each data.status = clicked begin for j=0 to data.length begin

{ 與 related 的節點保持適當距離 }

if i != j AND data[i].status=related

AND distance(data[i].location, data[j].location)< propLength begin

Separate(data[i], data[j]);

end end

end

資料來源：研究者整理

環形繪圖規則主要精神在於，至於畫布中央之 CNodes 之間必須保持節點大 小之兩倍距離（演算法 3 中之「properLength」變數），不可過於靠近，也不可 距離過遠；陳列於環形的 RNodes 之間必須保持 properLength 的距離；而 RNodes 必須與 CNodes 保持一個適當的半徑距離，此半徑距離取決於呈現於畫布中的 RNodes 個數與 properLength 的乘積。因此演算法 3 中即是將 CNodes 與 RNodes 的位置調整分開做運算，首先運算每個 CNodes 之間的適當距離同時將 RNodes 至於半徑距離的適當位置上；接著運算所有 RNodes 之間是否保持 properLength，

否則進行位置的調整。

45

二、 Force-Directed

本介面的第二種網絡圖演算法是採用 Fruchterman 與 Reingold 於 1991 年提 出的 Force-Directed 繪圖演算法。此演算法的核心概念是讓所有在畫布中的節點 保持某個適當距離，且相關的節點必須以某大小的吸引力相互靠近。這樣的繪圖 方式，注重網絡圖的視覺平衡，且能夠幫助使用者觀察節點的關係密度與大略的 關鍵字分群（Clustering）。

以下為此演算法的繪圖規則：

 當兩節點相互重疊時必須分開

 當兩節點無關係且距離太近時必須分開

 當兩節點有關係而距離太遠時必須靠近

而所謂的「Force」事實上指的是兩節點靠近或是分開的一個「作用力」，作 用力的方向取決於兩節點位置相減而得的向量，如公式 1 所示，不論一個節點 因為繪圖規則而如何移動，介面都是參照此公式所計算出的力道（Force）值來 改變節點的位置，其中向量（Vector）可能為正或為負，比率（Ratio）為控制力 道大小的一個百分比，這個百分比取決於介面中節點的多寡，節點越多，百分比 則越小；節點越少，百分比則越大。這個變數是為了避免節點過多時，因為節點 調整位置的力道過大，移動速度過高，以致呈現的網絡圖過於混亂。

公式 1

𝐹𝑜𝑟𝑐𝑒 = 𝑉𝑒𝑐𝑡𝑜𝑟 × 𝑅atio

Force-Directed 演算法能夠繪製出較符合視覺平衡的網絡圖，且同時給予使 用者一個分群的概觀。事實上，當節點過多；關係過於複雜時，Force-Directed 無法呈現清楚的關鍵字子群。

46

三、 Chameleon

本介面同時參考 Chameleon（Karypis, Han, & Kumar, 1999）演算法的分群概 念，應用於網絡圖的佈局中。相較於 Force-Directed，Chameleon 更直覺化的呈現 關鍵字的子群，且能夠分出更多的關鍵字子群。當關鍵字過多時，此繪圖演算法 能夠有效的幫助使用者將關鍵字作分類；使用者能夠藉由觀察關鍵字的群集聯想 其相關的背景，同時希望藉此導覽使用者進入更多種不同的主題，進行更多元的 瀏覽。

本研究時作之 Chameleon 演算法於網絡繪圖主要分為幾個步驟：

1. 將節點以 K-Nearest 的概念，找出各個節點最相關的節點（關係強度最強），

並劃分出數個子群，且各子群內所包含之關鍵字互不重複。簡單的來說，此 步驟是將每個節點與其最相關的節點視為一個子群，接著在判定各個子群中 是否有重複的關鍵字，若重複則將其兩子群合併。

2. 計算於第一步驟中所分出的每個子群內連結強度，與各群集外連結強度。內 連結強度為該子群內所有關係強度之平均值；外連結強度則為該子群中，所 有關鍵字連外之關係強弱的平均值。

3. 依照所有子群內外連結強度的平均值，判斷各個群集之間是否需要進行子群 的合併。

4. 當所有子群的合併結束後，介面會依照每個子群內所包含的關鍵字數量分配 此子群於畫布中所占的面積區塊，每個區塊之間互不重疊。

5. 所有關鍵字必須向所屬梔子群的區塊移動，直到位置落於該區塊之中。

47 演算法 4 參考 Chameleon（Karypis, Han, & Kumar, 1999）分群概念實作於網絡繪圖的演算法。

Groups[][];

function getMaxIndex(Strength[],Relations[])={取得最相關節點的 index}

begin

maxIndex=0; {最相關節點的 index}

for i=1 to Strength.length begin

if Strength[i] > Strength[maxIndex]

begin maxIndex= Relations[i];

end

return maxIndex;

end

for i=0 to data.length begin

for each data.relations.length begin

List[] Relations=list[ ]; {關係節點的 Index List}

List[] Strength=list[ ]; {關係的強度 List}

Group.push[data[i]][ data[getMaxIndex(Strength[])]]

end end

{Groups 的分群做好之後，依照各個分群將節點聚集}

propLength = nodeSize*4; {不同 Group 的節點須保持的適當距離}

for i=0 to data.length begin for j=0 to data.length begin

if i !=j AND i.group = j.group

AND distance(data[i].location , data[j].location ) >

propLength begin

Closer(data[i], data[j]);

end

else if i !=j AND i.group != j.group

AND distance(data[i].location , data[j].location ) <

propLength begin

Separate(data[i].location , data[j].location) end

end end

資料來源：研究者整理

前述之環形與 Force-Directed 二種繪圖演算法以即時且動態的方式調整與分 配節點位置，當使用者切換環形或是 Force-Directed 繪圖規則時，介面立即運作 該演算法，節點會以動態的方式依據繪圖規則於畫布中移動至目標位置，也就是 說切換的過程為即時的繪圖運算、及時的呈現，使用者能夠同時觀察節點的動態 移動，這是為了避免過度快速的移動節點位置，以至於使用者觀察焦點的遺失。

而 Chameleon 的繪圖規則採用預先運算的方式，當介面中呈現的關鍵字數量產生 變化，系統會重新以 Chameleon 分群演算法將關鍵字分群，並分配子群於畫布中 的區塊大小與位置，雖然切換至 Chameleon 繪圖規則時，節點看似同樣以動態的

48

方式移動，但是事實上所有節點移動的目標位置是絕對的，而並不像環形與 Force-Directed 二種繪圖演算法，主要考慮所有節點之間的相對位置進行調整。