基于B/S構架的網絡結構可視化系統設計與實現

王 勇，王 松，張紅英

1.西南科技大學 信息工程學院，四川 綿陽621010

2.西南科技大學 計算機科學與技術學院，四川 綿陽621010

1 引言

信息技術的快速發展使人們進入了網絡時代，人們早已生活在各種各樣的網絡世界中。作為現實生活中最常見的關系型數據，網絡往往隱藏了復雜的信息[1]。隨著網絡規模不斷擴大，網絡節點越來越多，節點關系越來越復雜，傳統的表格+文字的表現形式，已無法有效呈現網絡的拓撲結構[2]。網絡結構可視化作為可視化中的重要分支，一方面可以幫助用戶了解網絡的內部結構，另一方面能夠挖掘網絡中隱含的信息和規律[3]。以社交網絡為例，如果將網絡中的個體看成一個節點，個體間的關系看成一條邊，那么這些節點和邊就可以構成一個人物關系圖譜。圖1 是《悲慘世界》中的人物關系圖譜，使用圓形表示節點，直線表示邊，節點的顏色代表不同組別，邊的粗細代表人物間關系的親密程度。通過這個可視化例子，可以知道誰是網絡的中心人物，網絡中存在幾個派系，人物間的親密程度。

圖1雖然在一定程度上能幫助用戶理解網絡結構，但還只是一個靜態圖，具有一定的局限性[4]。特別是當網絡節點數目龐大、網絡結構復雜時，有限的可視化空間將大大限制網絡的可視化效果。而交互作為可視化的一個重要手段，一方面能夠緩解有限的可視化空間和數據過載之間的矛盾，另一方面能幫助用戶深入直觀地理解網絡結構。對一個可視化系統來說，最終的目的不是向用戶傳遞定制好的信息，而是通過提供交互式的分析手段幫助用戶理解數據。

圖1 《悲慘世界》的人物關系圖譜

2 相關研究

在移動互聯網和大數據的背景下，網絡規模越來越大，節點關系越來越復雜，這給網絡的分析和研究帶來了巨大的挑戰。網絡結構可視化可以清晰直觀地反應當前網絡的連接狀況，輔助人們了解網絡的內部結構和具體規律。針對網絡結構可視化的研究主要包括布局算法、交互設計兩個方面。

布局算法主要是確定節點和邊在空間內的具體位置。一個好的布局算法能有效避免節點重疊和邊交叉，清晰直觀地呈現網絡的連接狀況。常見的布局算法如下：（1）力導向布局算法。該算法使用一套虛擬的物理系統，根據節點受到的引力和斥力變換節點的位置，經過不斷迭代，直到節點位置不再發生變換，系統最終達到一種穩定狀態。（2）網格型布局算法。該算法將布局空間分割成多個網格，節點被均分到不同網格中，有效避免了節點重疊和過于集中的問題。（3）隨機布局算法。該算法隨機分配節點的位置，邊不參與計算，布局完成后再繪制各節點的連線。（4）層次型布局算法。該算法會根據網絡的結構特征，將節點放置到不同層次，同時展示節點的連接關系。

交互通過與操作對象之間的互動操作，讓用戶更好地參與到對數據的理解。當前交互的研究熱點如下：（1）焦點加上下文交互。通過建立變形函數，扭曲焦點周圍的空間結構，突出焦點對象，縮小焦點周圍信息。（2）直接交互。通過直接操作繪制結果，有效提高交互效率，降低學習成本。（3）關聯性交互。關聯性交互是進行多變量可視化的重要方法，被廣泛應用于多視圖領域。（4）沉浸式交互。通過在虛擬環境中提供沉浸式的學習環境，為用戶提供了一種更高效的學習方式。

當前網絡結構可視化工具已成為研究網絡必不可少的重要方法。網絡結構可視化工具種類繁多，通用的可視化工具包括Gephi、NodeXL、Cytoscape、yEd、GraphViz 等[5]，它們為網絡的研究提供了良好的支持。這些工具雖然功能豐富、各具特點，但在可擴展性、表現方式、自主可控等方面存在諸多缺陷。此外，這些工具大都依賴JVM，運行時需要特殊環境的支持。近年來伴隨著Web技術的快速發展，誕生了一些基于B/S構架的網絡結構可視化工具。例如：國外開源的sigma.js，能在瀏覽器上快速生成靜態或者動態網絡。百度推出的Echarts，能展現千萬級的網絡數據。螞蟻金服旗下的網絡數據可視化引擎G6，提供了一系列優雅、便于使用的可視化解決方案。以上基于B/S 構架的可視化工具雖然易部署、跨平臺，但靈活性差、無法滿足高度定制化的需求。

基于以上原因，通過Web 技術，設計一個表現方式靈活、部署簡單、跨平臺、易維護的網絡結構可視化系統具有非常重要的意義。

3 網絡結構可視化系統設計

網絡結構可視化系統分為三層，由上到下分別是視圖層、業務層、數據層，系統總體框架如圖2所示。采用B/S架構進行前后端分離，為了優化系統性能，前端主要負責展示和交互，后端主要負責邏輯處理和復雜的數據計算。使用Vue作為前端框架，Flask作為后端框架，D3 作為可視化圖形庫，MongoDB 作為后臺數據庫，NetworkX作為網絡分析工具。

圖2 系統總體框架

3.1 數據層

數據層主要為業務層提供數據源。將原始的點、邊數據進行清洗，剔除其中的冗余值、缺失值、無效值，整理為易于操作的JSON 格式并存儲到性能優越的MongoDB中。節點屬性和邊屬性如表1和表2所示。

表1 節點屬性

表2 邊屬性

3.2 業務層

業務層是系統的關鍵層，它從數據層提取數據，并將處理的結果提交給視圖層。業務層可細分為網絡模型構建模塊、網絡布局與屬性映射模塊、網絡交互分析模塊。

3.2.1 網絡模型構建

網絡模型構建模塊包括網絡結構特征參數計算、網絡拓撲結構劃分。

（1）網絡結構特征參數。傳統的網絡拓撲結構分析方法難以滿足網絡結構分析的需求。引入復雜網絡算法計算網絡結構特征參數，包括度、度中心性、接近中心性、介數中心性、特征向量中心性、聚類系數、網絡直徑等[6]。網絡結構特征參數從不同角度反映了網絡的拓撲性質，能幫助用戶加深對網絡的理解。

（2）網絡拓撲結構劃分。為了便于理解網絡中的內在結構，引入復雜網絡的一個重要特征——社區結構，揭示網絡中的聚集現象。使用基于貪婪原理的社區發現算法CNM 完成網絡拓撲結構劃分[7]。該算法能夠在相對較小的時間復雜度下，有效發現網絡中的社區結構。

采用NetworkX內置算法完成網絡結構特征參數計算和網絡拓撲結構劃分，表3是更新后的節點屬性。

表3 更新后的節點屬性

3.2.2 網絡布局與屬性映射

網絡布局與屬性映射模塊，包括網絡分層、成分可視化、屬性映射。

（1）網絡分層。當前復雜網絡的研究還主要集中在單層網絡而忽略了由于節點屬性差異，導致節點無法簡單疊加，從而形成了多層網絡[8]。傳統的單層網絡可視化方法已無法展示多層網絡信息，甚至有可能產生錯誤認識。為清晰呈現多層網絡的拓撲結構，本文依據節點屬性，對網絡進行分層。對于同時位于不同網絡中的節點，使用線條進行連接。分層后的網絡一方面可以顯示多層網絡間的連接關系，另一方面能夠緩解有限的可視化空間與數據過載的矛盾。

（2）成分可視化。在圖論中將與其他部分完全斷開的子圖叫作成分。空間中領近的成分會增加視覺復雜度，降低網絡的可讀性。同時成分類型多種多樣，統一的布局方式無法呈現其結構特征[9]。針對以上問題，本文設計了如圖3 所示的可視化流程。點擊分層網絡中的節點，進入對應的網絡層。為了減低網絡層中成分間的視覺干擾，使用圓環及其中央的節點連接圖表示成分。使用圓環樣式表示成分的屬性，節點連接圖表示組別間的連接關系，方便用戶快速獲取成分的信息。點擊圓環，將展示成分詳細的拓撲結構。為有效觀察成分的拓撲結構，根據網絡的結構特征，自動選擇布局方式。利用NetworkX 的內置算法判斷成分的結構，若為樹結構則使用層次布局，否則使用力導向布局。

圖3 成分可視化流程

（3）屬性映射。為了使呈現效果具有廣泛的視覺特性，加深用戶對數據的理解，將屬性進行編碼，譬如將節點的度映射節點大小，節點的組別映射為節點顏色。

3.2.3 網絡交互分析模塊

網絡交互分析模塊，包括多視圖協同交互和多樣化交互。

（1）多視圖協同交互。多視圖可以同時觀察數據的不同屬性，能在不同角度和顯示方式下觀察數據[10]。鑒于多視圖的優點，本文設計了如圖4所示的多視圖協同交互流程。其中，主視圖呈現網絡的拓撲結構，表格視圖展示所篩選節點的相關屬性，信息視圖顯示網絡的總體特性，提供定制化的視覺特性設置和基于特征參數的直方圖過濾，小地圖標識當前的瀏覽位置。分析流程如下：①表格視圖+主視圖。在表格視圖中進行勾選操作，被勾選的節點將在主視圖中高亮顯示；在主視圖中框選網絡，被框選的節點將在表格視圖中列出。②主視圖+信息視圖。在主視圖中選中節點或邊，信息視圖將顯示點或邊的相關屬性；在信息視圖中進行直方圖過濾，主視圖將更新為過濾后的拓撲結構。③表格視圖+信息視圖。在信息視圖中進行直方圖過濾，表格視圖將列出所篩選節點的相關屬性。④主視圖+小地圖。在主視圖中進行滾輪操作，小地圖將幫助用戶實現整體到細節、逐層深入的分析過程。

圖4 多視圖協同交互

（2）多樣化交互。Shneiderman[11]歸納了可視化最基本的交互操作，包括過濾、關聯、縮放、概覽、按需提供細節、記錄和提取。好的交互方式應該能幫助用戶深入理解數據，并發現其中潛在的規律。基于以上的設計原則，本文設計了如圖5所示的交互方式。

圖5 多樣化交互

①概覽+細節。縮放、平移通過調整視圖位置、控制視圖內容，能實現對任意位置的瀏覽，但有相當大的局限性。當網絡規模龐大、結構復雜時，如果沒有提供足夠的上下文，容易造成位置迷失。基于此，本文引入了概覽+細節的交互方式，通過概覽視圖提供上下文信息，細節視圖展示具體細節，從而實現兼顧高層次宏觀結構和低層次局部特征的分析過程[12]。分析流程如下：在探索瀏覽過程中，讓主視圖和小地圖分別充當細節視圖和概覽視圖，其中，主視圖顯示當前關注區域的網絡拓撲結構，熱力圖充當的小地圖標識當前瀏覽位置，通過顏色隱喻網絡的疏密程度，幫助用戶把握網絡的整體結構。在探索交互過程中，小地圖通過引導用戶挖掘的方向，幫助用戶獲取更多細節信息，最終實現整體到細節、逐層深入的分析過程。

②過濾。過濾作為一種靈活有效的交互方式，通過設置約束條件能快速獲取用戶感興趣的信息[13]。然而傳統過濾方式的輸入條件和篩選結果都是文本形式，這種方式在用戶對數據特性不了解時，往往難以快速獲取結果。基于此，本文借助特征參數直方圖，以矩形框選充當輸入條件，動態更新網絡的拓撲結構。具體分析流程如下：特征參數直方圖統計每種特征參數的分布情況，如度分布、接近中心性分布、介數中心性分布，對各直方圖的篩選結果取并集，動態獲取網絡的拓撲結構。圖形化的過濾方式可以快速挖掘網絡的結構特征，允許用戶專注于對過濾數據的理解和分析。

③魚眼、鄰接矩陣。對于非樹結構的網絡數據，繪制結果中的回路會帶來邊交叉的問題，在降低網絡可讀性的同時，還容易導致認知上的偏差。基于此，本文引入了基于視角變換的魚眼交互[14]和基于布局轉變的鄰接矩陣交互[15]。魚眼變換是一種常見的焦點+上下文技術，通過建立變形函數對空間內的對象進行變形處理，將焦點信息放大，焦點周圍的上下文信息相對縮小。圖6是對《悲慘世界》人物關系圖譜采用魚眼變換的結果，從圖中可以看出，焦點位置的節點被放大，周圍其余節點受到擠壓，呈現徑向放大的效果，有效揭示了局部網絡的連接關系。與魚眼交互不同，鄰接矩陣使用行（列）表示對象，若對象之間有聯系，則在它們相交的位置進行標識。相較于傳統的節點連接形式，鄰接矩陣雖然不易理解，但當網絡密集時，可有效利用空間，再結合排列算法，就能將網絡清晰呈現出來。如圖7 所示，鄰接矩陣表示后的節點連接圖，完全規避了邊交叉，提高了網絡的可讀性。

圖6 魚眼交互

圖7 鄰接矩陣

3.3 視圖層

視圖層包括主視圖、表格視圖、信息視圖。主視圖呈現網絡的拓撲結構，包括多層網絡可視化、熱力圖、成分可視化。表格視圖列出節點的相關屬性。信息視圖包括節點屬性信息、邊屬性信息、網絡樣式的修改、基于特征參數的直方圖過濾等。

（1）多層網絡可視化。傳統的二維平面無法展示多層網絡，而三維空間表示的多層網絡能讓拓撲結構變得易于觀察和理解。WebGL 無需依賴其他插件，就能在瀏覽器中呈現3D 圖形，本文選擇的three.js 對其進行了封裝，能方便快捷地完成圖形的繪制。

（2）熱力圖。熱力圖作為一種密度圖，使用顯著的顏色差異呈現數據的分布情況，利用該特性可以隱喻網絡的疏密程度。本文選擇的heatmap.js，簡單易用，能快速得到一個直觀的可視化效果。

（3）成分可視化。使用圓環大小、顏色、角度分別表示成分大小、組別、組別大小。圓環中的節點連接圖表示組別間的連接情況。圓環+節點連接圖的可視化方式，一方面能有效降低成分間的視覺干擾，另一方面通過其樣式能快速獲取成分信息。

依據文獻[16]的可視化設計原則，圓環半徑的計算方式如下：

式中，num 為當前成分的大小，nmin為最小成分的大小，nmax為最大成分的大小，max 為設置的最大半徑，min 為設置的最小半徑。

圓環角度的計算方式如下：

式中，n 為組別數量，xi為i 類組別的大小。

組別的節點連接圖算法步驟如下：

輸入：邊數據

輸出：組別的節點連接圖

步驟1 遍歷邊數據links，通過links.source 對象和links.target 對象，獲取組別數組nodes 及組別連接關系數組edges。

步驟2 創建力導向布局，將nodes 和edges 作為布局轉換數據，設置相關的布局參數。

步驟3 繪制節點連接圖，組別大小編碼節點大小，組別顏色編碼組別類型。

（4）表格視圖。表格視圖展示節點的相關屬性，包括節點編號，度，度中心性，接近中心性等。選擇基于Vue 2.0的組件庫Element UI，利用其提供的Table表格和Pagination分頁組件，展示節點相關屬性，對結果進行篩選排序，分頁顯示相關數據。

（5）信息視圖。利用輕量級的圖形用戶界面庫dat.GUI，顯示網絡的屬性信息，提供定制化的視覺特性設置。對d3的brush設置監聽事件，實現基于特征參數的直方圖過濾。

4 系統功能比較與案例分析

本文設計并實現了如圖8的網絡結構可視化系統，通過與Gephi 的功能比較和案例分析驗證了系統的合理性和有效性。

圖8 系統界面圖

4.1 與Gephi的功能比較

4.1.1 布局方式比較

（1）Gephi布局方式

Gephi 提供了高效的布局算法，其強大的OpenGL渲染引擎能夠實時分析超大規模的網絡。Gephi提供了多種布局方式，包括力導向布局、圓形布局、大圖網格布局等，允許用戶通過調整布局參數來影響布局效果，圖9（a）是力導向布局的結果。

（2）本文布局方式

本系統首先會依據節點的屬性對網絡進行分層，然后使用圓環表示成分，最后根據成分的結構特征自動選擇布局方式（如圖9（b））。

圖9 布局方式比較

比較：得益于內置OpenGL 引擎和高效算法的支持，Gephi能夠實時處理大規模的網絡數據，但Gephi不能展示多層網絡。本系統的優勢體現在：（1）通過對網絡分層，能直觀展示多層網絡結構。（2）圓環表示成分的方法，一方面降低了成分間的視覺干擾，另一方面加快了信息獲取的效率。（3）根據成分的結構特征，自動選擇布局方式。

4.1.2 交互方式比較

（1）Gephi交互方式

Gephi 作為一款開源強大的交互式可視化工具，提供了豐富的交互操作。例如修改節點、邊、標簽的樣式，對網絡進行分割、排序、過濾、組合操作等等。

（2）本系統的交互

本系統根據實際需求，也設計了大量的交互方式。例如，基于特征參數的直方圖過濾，以熱力圖作為概覽視圖的概覽+細節，緩解邊交叉的魚眼交互和鄰接矩陣變換。

比較：Gephi作為通用的網絡結構可視化工具，功能豐富、適用性強，能滿足大部分應用需求。本系統根據實際場景需求，設計了靈活的交互方式，能幫助用戶更好地理解數據，發現其中潛在的規律。

4.2 案例分析

本節通過案例分析來驗證系統的實用性和有效性。通過豆瓣電影API，獲取中國電影、歐美電影、日韓電影的演員關系。分析流程如圖10所示。

圖10 分析流程圖

4.2.1 中外電影合作交流的關鍵人物

依據電影國籍，將演員劃分到中國電影層、歐美電影層、日韓電影層。使用顏色編碼網絡層，層級間的連線說明演員同時參演了不同類型的電影，如圖11 所示。縮放、平移調整瀏覽視角，發現中國電影層上的某個節點同時還出現在歐美電影層和日韓電影層中。鼠標懸浮到該節點上，顯示是“成龍”，即“成龍”是中外電影合作交流的關鍵人物。本文設計的多層網絡可視化，依據節點屬性對網絡進行分層，探索結果與事實相符，證明了網絡分層的合理性和有效性。

圖11 網絡分層

4.2.2 驗證網絡基本性質

依據系統的交互邏輯，點擊分層網絡中的節點進入對應的網絡層。圖12（a）是中國電影層，從圓環的大小、顏色、角度可以看出各成分的相對大小、組別、組別的相對大小，從節點連接圖可以看出各組別間的連接關系，從提示框可以看出各組別的大小信息。本文設計的圓環表示成分的可視化方法，一方面降低了成分間的視覺干擾，另一方面加快了成分信息的獲取效率，驗證了設計的合理性。

圖12 網絡性質分析

圖12 （b）是最大成分的節點連接圖。網絡中的“派系”現象，反映出復雜網絡的社區結構特性。圖12（c）顯示了成分的統計信息，該網絡由263 個演員構成，存在472 對合作關系，網絡密度為0.013 7，即合作關系只能達到理論最大值的1.37%，說明這是一個非常稀疏的網絡。網絡直徑為10，平均路徑長度為4.038，說明該網絡中距離最遠的兩個點之間的平均距離為4.038。根據六度分隔理論，最多通過六個人就能夠找到任何一個陌生人，說明該網絡中也存在小世界效應，即反映了復雜網絡的小世界特性。圖12（d）是成分的特征參數直方圖，從度的統計直方圖可以看出演員度數近似服從冪律分布，即少數人有很大的度，大部分人的度很小，反映了復雜網絡的無標度特性。以上的分析結果都符合復雜網絡理論[17]，驗證了設計的合理性。

4.2.3 交互式探索分析

依據系統整體到細節的交互邏輯，在點擊圓環后會顯示成分的拓撲結構。圖13（a）是中國電影層中最大成分的拓撲結構，網絡中存在3 個以“成龍”“周星馳”“陳佩斯”為核心的派系。這些派系通過一些關鍵節點連接在了一起，為了發現這些關鍵節點，不斷調整變換當前位置，同時借助熱力圖確定當前瀏覽位置。在瀏覽至“陳佩斯”和“周星馳”兩個派系的交界處時（如圖13（b）），發現度很小的“梁詠琪”，卻充當了連接兩個派系的關鍵人物。這說明她是這兩個派系重要的“橋梁”，失去她就有可能中斷派系間的聯系。

圖13 瀏覽探索網絡結構

在瀏覽探索網絡的過程中，節點重疊和邊交叉增加了視覺復雜度，如圖14（a）。分別對其使用基于視覺變換的魚眼交互和基于布局轉換的鄰接矩陣交互。圖14（b）是魚眼變換后的結果，圖中焦點部分的結構被放大，而遠離焦點部分的結構被擠壓。圖14（c）是按度大小排序的鄰接矩陣變換，完全規避了節點重疊和邊交叉。

過濾可以快速獲取網絡結構，發現網絡中感興趣的節點。度中心性、接近中心性、介數中心性作為測量網絡中心性的不同方法，從不同方面評價了節點的相對重要性[18]。本文借助特征參數直方圖，以矩形框選充當輸入條件，動態更新網絡的拓撲結構，發現網絡中的重要節點。圖15（a）中獲取了度中心性最大的節點“成龍”，說明與“成龍”連接的節點最多。圖15（b）獲取了接近中心性最大的節點“關之琳”，說明“關之琳”最接近網絡的中心位置。圖15（c）獲取了介數中心性最大的節點“成龍”，說明流經“成龍”的網絡流最多。

圖14 邊交叉中的視覺混淆

圖15 特征參數

5 結束語

本文根據需求設計并實現了一個基于B/S構架的網絡結構可視化系統。通過與Gephi 的功能比較和案例分析，驗證了系統的合理性和有效性。其優點表現在：

（1）系統采用B/S構架，具有部署簡單、不依賴特殊環境、跨平臺等優點。

（2）針對單層網絡無法顯示多層網絡信息，設計了一種多層網絡的可視化方法。

（3）根據網絡的結構特點，自動選擇布局方式。根據實際的分析需求，提供了大量的交互方式。

但是系統還存在不足：D3采用了SVG的繪圖方法，容易引起網頁頻繁重排和重繪，特別是當網絡規模較大時，將極大影響瀏覽器的性能。未來將使用WebGL 來優化大規模網絡的交互問題。