論文：《Animated Exploration of Dynamic Graphs with Radial Layout》

Abstract:

    本文使用徑向樹佈局方法，通過焦點的互動選擇來動畫變換新佈局。為了使轉換易於遵循，動畫線性插值節點的極座標，同時強制排序和方向約束。 我們將此技術應用於社交網路和Gnutella檔案共享網路的視覺化，並討論我們的非正式可用性測試的結果。

1.Introduction:

    在本文中，通過選擇單個節點作為感興趣的中心或焦點來確定圖的檢視。這項工作的主要貢獻是一種新技術，即用於以平滑，吸引人的方式動畫從一個檢視到下一個檢視的過渡。該演算法通過線性插值節點的極座標並對新佈局實施約束來增強眾所周知的徑向佈局方法[7,8,12]，以使其儘可能與先前的佈局相似。

    當結合遠離焦點的聚合或消除節點的方法時，我們的技術也可以提供探索非常大的圖的有效方法。圖1顯示了我們實施的實施，應用於Gnutella網路的視覺化[11]。

2.Method:

   我們假設給出了一個由一個連通元件組成的圖。 隨著時間的推移，圖形可以隨著節點的插入或刪除而動態地改變。 我們將圖中邊緣連線的任意兩個節點稱為“鄰居”。在此視覺化方法中，檢視者可以通過選擇任何可見節點作為焦點節點。 然後以該點為焦點重新排列網路

2.1 Layout Technique

    我們將圖形視為以焦點節點為根的樹。 我們通過從焦點開始執行圖的廣度優先遍歷來確定樹中的父子關係。 除焦點之外的每個節點都將有一個鄰居作為其父節點，可能還有一些其他鄰居作為其子節點，並且可能還有其他非“非樹”鄰居。

    佈局後，繪製線條以顯示圖形中的所有邊，非樹邊以不同於樹中邊的顏色繪製。

  2.1.1 Radial Layout

    由於關注的焦點是單個節點，因此將該焦點節點放置在顯示器的中心並圍繞它佈置其他節點是很自然的。這裡使用了一種簡單的佈局“徑向繪圖”。節點佈置在焦點節點周圍的同心環上。每個節點位於環上，對應於距焦點的最短網路距離。焦點的直接鄰居位於最小的內環上，它們的鄰居位於第二個最小的環上，依此類推。我們的實現明確地繪製了這些環以使網路距離明顯。

    節點在其環上的角位置由分配給它的環的扇區確定。每個節點在分配給其父節點的扇區內被分配一個扇區，其大小與該節點的子樹的角寬度成比例。類似於此的方法在[22]中被詳細描述為“徑向放置”，其中所有節點具有相同的大小，因此節點的子樹的角寬度僅僅是其後代中的葉節點的數量。

  2.1.2 Space Allocation

    我們的演算法允許以不同的大小繪製節點。為了最大限度地減少較大節點阻塞較小節點的可能性，我們在環上分配空間時考慮每個節點的大小。每個單獨節點的角寬度是其直徑除以其距焦點的距離。我們可以為每個節點計算這個，因為我們知道從每個節點到焦點的網路距離。我們通過計算其頂部節點的角寬度，子子樹的總角度寬度以及選擇這兩個量中較大的一個來找到任何子樹的寬度。每個節點位於分配給它的角度扇區的中心。

    圖2說明了兩個示例圖的佈局方法。在這兩種情況下，節點A都是焦點，並且它被分配全部360度以在其子節點之間分配。節點B有許多自己的子節點，因此它給它的角度空間比它的兄弟節點更多。分配給節點B的子樹的區域被輕微著色。節點B的孩子躺在第二個環上;節點C（這些子節點之一）被分配以較暗陰影顯示的第二個環的切片。然後將所有節點C的後代排列在該陰影區域內。

    我們的演算法可以輕鬆地適應節點的新增和刪除。徑向佈局是動態變化圖形的合理選擇，因為節點的新增或刪除僅擾亂其兄弟節點，特別是當圖形變得密集時。

2.2 Animation Technique

    為了探索圖形，使用者選擇可見節點以成為新焦點。通過從新焦點執行廣度優先搜尋來找到新佈局樹，從而計算從新焦點到每個節點的網路距離。節點之間的邊被重新解釋為一組新的父子關係。如上所述，通過將每個節點分配給適當的環並分配環的角度扇區來確定新佈局。

    雖然這足以從新焦點的角度顯示圖形，但簡單地切換到這個新檢視可能會導致高度迷惑的重新排列。為了減少這種迷失方向，我們使用動畫來執行平滑過渡，並對新佈局強制執行一些約束以使其與當前佈局類似，以便更容易遵循過渡。

    動畫已經有效地用於其他工作，以幫助維護資料視覺化和使用者介面中的方向。資訊視覺化器[2,14,18]中的錐形樹和透視牆使用三維動畫來幫助使用者跟蹤物件。當用戶改變焦點時，Eades和Huang在力導圖中使用動畫來平滑過渡[9]。

    一些其他互動式圖形瀏覽器還保留不變數以幫助保持使用者定向。例如，在H3中，當選擇節點時，動畫過渡將其移動到球體的中心。過渡包括一個旋轉分量，這樣當節點到達中心時，它的祖先在它的左邊，而它的後代出現在右邊[16]。

    Hyperbolic瀏覽器[13]將節點和連結放在雙曲線空間內;改變焦點節點實際上改變了空間的哪個部分當前居中。相比之下，在我們的系統中，改變焦點節點通常會改變節點相對於彼此的佈局。這在雙曲線瀏覽器中不是必需的，因為它僅應用於樹結構，而我們的方法旨在顯示具有相關交叉線的圖形。

  2.2.1 Transition Paths

    佈局之間最簡單的過渡將沿著直線路徑將每個節點從其舊位置移動到新位置。 然而，這種線性插值會產生混亂的動畫。 在大多數過渡中，許多節點停留在同一個環上或移動到相鄰的環，但是直線移動可能導致節點離開其環並在返回之前遠離它。 直線運動還會導致許多節點聚集在顯示器中心的不可讀的叢中，然後在它們接近最終位置時分離。

    由於節點是徑向定位的，因此線性插值節點的極座標而不是它們的直角座標更有意義。因此，停留在環上的節點跟隨環的圓周，而環變化的節點平滑地從一個環螺旋到另一個環。當兄弟子樹維持它們的順序時，這也保留了在整個過渡期間分配給兄弟子樹的區域之間的邊界，使得向中心移動的節點不會與正在出路的其他節點發生衝突。

    徑向佈局演算法產生一種隱含的期望，即徑向距離應始終傳達距離焦點的網路距離;在極座標空間中插值與此期望一致。結果是一個更平滑的動畫，其中節點組圍繞圖形的中心一起旋轉。以這種方式聚類節點大大減少了理解動畫的認知努力，因為它允許人類視覺系統將組成物件組合成一個單元。它還使節點以弧形而不是直線移動，借用傳統動畫中的有效技術[3]。

  2.2.2 Transition Constraints

    我們設計了兩個約束來維持舊佈局和新佈局之間的最佳一致性。

    首先，我們選擇新佈局的方向，以減少旋轉行程。考慮所選新焦點的當前父節點。這個父母必須在第一個環上結束，因為它是新焦點的直接鄰居。我們確定新佈局的方向，以便連線新焦點及其父級的邊的方向保持不變。圖4顯示了選擇節點A成為新焦點的示例。節點A的當前父節點是節點B;新佈局的方向使得邊緣AB保持相同的方向。

    其次，因為圖形不一定是樹，所以節點的一些新子節點當前可能是它的非鄰居。當節點將角色從鄰居變為直接子節點時，這可能導致邊緣交叉。為了避免這個問題，我們檢查當前佈局中每個邊到節點鄰居的方向，從連線節點到新父節點的邊緣開始，順時針進行。然後，我們在新佈局中維護這種兒童的順序。

    這確保了在過渡期間新佈局中的樹邊緣不會彼此重合。在圖5中，當前駐留在環1上的節點A被選擇成為新焦點。考慮在此轉換期間節點B（節點A的子節點）會發生什麼。在轉換之前，邊1到8是節點B的子節點的邊，邊9和10是非樹邊。在轉換期間，節點B前往環1，而其鄰居（節點A除外）全部前往環2.注意邊1到10如何保持它們的相對順序。這確保了在過渡期間新佈局中的樹邊緣不會彼此重合。

  2.2.3 Animation Timing

    最後，我們希望在動畫的開頭和結尾提供最佳的視覺恆定性。 將另一種傳統動畫技術應用於互動[3]，我們使用慢速，慢速時序而不是直線時序。 如圖6所示，這是通過使用一部分反正切函式來控制動畫隨時間推移的進度來實現的。 動畫開始緩慢，平穩加速，然後在結束時減速。 大多數運動發生在時間間隔的中間三分之一。 這提供了良好的視覺提示，以幫助使用者預測節點移動到新位置。

  2.2.4 Scalability

    這種技術似乎適用於數百個節點。 對於較大的圖形，直接從中心節點跳到外圍節點可能會迷失方向。 在這種情況下，沿著圖中從舊焦點節點到新焦點節點的路徑執行一系列到中間焦點節點的轉換可能更好。 通過明智地聚合或隱藏顯示器中的外圍節點，還可以使該技術更好地擴充套件。

5.Conslusions

    我們設計，實現並測試了以焦點加上下文風格互動式探索圖形的技術。 我們提出了一種新方法，用於以一種吸引人的方式動畫從一個檢視到下一個檢視的過渡，從而減少混淆。 我們結合了極座標空間中的插值技術，慢入，慢速運動時序以及對佈局的約束的強制執行，以產生平滑且易於遵循的過渡。

    我們成功地將這些技術應用於社交網路和Gnutella檔案共享網路的視覺化。 非正式使用者測試支援我們的假設，即動畫，使用極座標進行插值，節點上的排序約束以及慢進，慢速時序都可以提高在探索圖形時維護上下文的能力。 這項工作的一個自然延伸是將這種技術與聚合或消除節點的方法相結合[22]，以便探索非常大的圖形。