王 勇，王 松，張紅英

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

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

1 引言

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

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

圖1 《悲慘世界》的人物關(guān)系圖譜

2 相關(guān)研究

在移動互聯(lián)網(wǎng)和大數(shù)據(jù)的背景下，網(wǎng)絡(luò)規(guī)模越來越大，節(jié)點關(guān)系越來越復(fù)雜，這給網(wǎng)絡(luò)的分析和研究帶來了巨大的挑戰(zhàn)。網(wǎng)絡(luò)結(jié)構(gòu)可視化可以清晰直觀地反應(yīng)當前網(wǎng)絡(luò)的連接狀況，輔助人們了解網(wǎng)絡(luò)的內(nèi)部結(jié)構(gòu)和具體規(guī)律。針對網(wǎng)絡(luò)結(jié)構(gòu)可視化的研究主要包括布局算法、交互設(shè)計兩個方面。

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

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

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

基于以上原因，通過Web 技術(shù)，設(shè)計一個表現(xiàn)方式靈活、部署簡單、跨平臺、易維護的網(wǎng)絡(luò)結(jié)構(gòu)可視化系統(tǒng)具有非常重要的意義。

3 網(wǎng)絡(luò)結(jié)構(gòu)可視化系統(tǒng)設(shè)計

網(wǎng)絡(luò)結(jié)構(gòu)可視化系統(tǒng)分為三層，由上到下分別是視圖層、業(yè)務(wù)層、數(shù)據(jù)層，系統(tǒng)總體框架如圖2所示。采用B/S架構(gòu)進行前后端分離，為了優(yōu)化系統(tǒng)性能，前端主要負責展示和交互，后端主要負責邏輯處理和復(fù)雜的數(shù)據(jù)計算。使用Vue作為前端框架，F(xiàn)lask作為后端框架，D3 作為可視化圖形庫，MongoDB 作為后臺數(shù)據(jù)庫，NetworkX作為網(wǎng)絡(luò)分析工具。

圖2 系統(tǒng)總體框架

3.1 數(shù)據(jù)層

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

表1 節(jié)點屬性

表2 邊屬性

3.2 業(yè)務(wù)層

業(yè)務(wù)層是系統(tǒng)的關(guān)鍵層，它從數(shù)據(jù)層提取數(shù)據(jù)，并將處理的結(jié)果提交給視圖層。業(yè)務(wù)層可細分為網(wǎng)絡(luò)模型構(gòu)建模塊、網(wǎng)絡(luò)布局與屬性映射模塊、網(wǎng)絡(luò)交互分析模塊。

3.2.1 網(wǎng)絡(luò)模型構(gòu)建

網(wǎng)絡(luò)模型構(gòu)建模塊包括網(wǎng)絡(luò)結(jié)構(gòu)特征參數(shù)計算、網(wǎng)絡(luò)拓撲結(jié)構(gòu)劃分。

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

（2）網(wǎng)絡(luò)拓撲結(jié)構(gòu)劃分。為了便于理解網(wǎng)絡(luò)中的內(nèi)在結(jié)構(gòu)，引入復(fù)雜網(wǎng)絡(luò)的一個重要特征——社區(qū)結(jié)構(gòu)，揭示網(wǎng)絡(luò)中的聚集現(xiàn)象。使用基于貪婪原理的社區(qū)發(fā)現(xiàn)算法CNM 完成網(wǎng)絡(luò)拓撲結(jié)構(gòu)劃分[7]。該算法能夠在相對較小的時間復(fù)雜度下，有效發(fā)現(xiàn)網(wǎng)絡(luò)中的社區(qū)結(jié)構(gòu)。

采用NetworkX內(nèi)置算法完成網(wǎng)絡(luò)結(jié)構(gòu)特征參數(shù)計算和網(wǎng)絡(luò)拓撲結(jié)構(gòu)劃分，表3是更新后的節(jié)點屬性。

表3 更新后的節(jié)點屬性

3.2.2 網(wǎng)絡(luò)布局與屬性映射

網(wǎng)絡(luò)布局與屬性映射模塊，包括網(wǎng)絡(luò)分層、成分可視化、屬性映射。

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

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

圖3 成分可視化流程

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

3.2.3 網(wǎng)絡(luò)交互分析模塊

網(wǎng)絡(luò)交互分析模塊，包括多視圖協(xié)同交互和多樣化交互。

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

圖4 多視圖協(xié)同交互

（2）多樣化交互。Shneiderman[11]歸納了可視化最基本的交互操作，包括過濾、關(guān)聯(lián)、縮放、概覽、按需提供細節(jié)、記錄和提取。好的交互方式應(yīng)該能幫助用戶深入理解數(shù)據(jù)，并發(fā)現(xiàn)其中潛在的規(guī)律?；谝陨系脑O(shè)計原則，本文設(shè)計了如圖5所示的交互方式。

圖5 多樣化交互

①概覽+細節(jié)?？s放、平移通過調(diào)整視圖位置、控制視圖內(nèi)容，能實現(xiàn)對任意位置的瀏覽，但有相當大的局限性。當網(wǎng)絡(luò)規(guī)模龐大、結(jié)構(gòu)復(fù)雜時，如果沒有提供足夠的上下文，容易造成位置迷失?；诖?，本文引入了概覽+細節(jié)的交互方式，通過概覽視圖提供上下文信息，細節(jié)視圖展示具體細節(jié)，從而實現(xiàn)兼顧高層次宏觀結(jié)構(gòu)和低層次局部特征的分析過程[12]。分析流程如下：在探索瀏覽過程中，讓主視圖和小地圖分別充當細節(jié)視圖和概覽視圖，其中，主視圖顯示當前關(guān)注區(qū)域的網(wǎng)絡(luò)拓撲結(jié)構(gòu)，熱力圖充當?shù)男〉貓D標識當前瀏覽位置，通過顏色隱喻網(wǎng)絡(luò)的疏密程度，幫助用戶把握網(wǎng)絡(luò)的整體結(jié)構(gòu)。在探索交互過程中，小地圖通過引導用戶挖掘的方向，幫助用戶獲取更多細節(jié)信息，最終實現(xiàn)整體到細節(jié)、逐層深入的分析過程。

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

③魚眼、鄰接矩陣。對于非樹結(jié)構(gòu)的網(wǎng)絡(luò)數(shù)據(jù)，繪制結(jié)果中的回路會帶來邊交叉的問題，在降低網(wǎng)絡(luò)可讀性的同時，還容易導致認知上的偏差?；诖耍疚囊肓嘶谝暯亲儞Q的魚眼交互[14]和基于布局轉(zhuǎn)變的鄰接矩陣交互[15]。魚眼變換是一種常見的焦點+上下文技術(shù)，通過建立變形函數(shù)對空間內(nèi)的對象進行變形處理，將焦點信息放大，焦點周圍的上下文信息相對縮小。圖6是對《悲慘世界》人物關(guān)系圖譜采用魚眼變換的結(jié)果，從圖中可以看出，焦點位置的節(jié)點被放大，周圍其余節(jié)點受到擠壓，呈現(xiàn)徑向放大的效果，有效揭示了局部網(wǎng)絡(luò)的連接關(guān)系。與魚眼交互不同，鄰接矩陣使用行（列）表示對象，若對象之間有聯(lián)系，則在它們相交的位置進行標識。相較于傳統(tǒng)的節(jié)點連接形式，鄰接矩陣雖然不易理解，但當網(wǎng)絡(luò)密集時，可有效利用空間，再結(jié)合排列算法，就能將網(wǎng)絡(luò)清晰呈現(xiàn)出來。如圖7 所示，鄰接矩陣表示后的節(jié)點連接圖，完全規(guī)避了邊交叉，提高了網(wǎng)絡(luò)的可讀性。

圖6 魚眼交互

圖7 鄰接矩陣

3.3 視圖層

視圖層包括主視圖、表格視圖、信息視圖。主視圖呈現(xiàn)網(wǎng)絡(luò)的拓撲結(jié)構(gòu)，包括多層網(wǎng)絡(luò)可視化、熱力圖、成分可視化。表格視圖列出節(jié)點的相關(guān)屬性。信息視圖包括節(jié)點屬性信息、邊屬性信息、網(wǎng)絡(luò)樣式的修改、基于特征參數(shù)的直方圖過濾等。

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

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

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

依據(jù)文獻[16]的可視化設(shè)計原則，圓環(huán)半徑的計算方式如下：

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

圓環(huán)角度的計算方式如下：

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

組別的節(jié)點連接圖算法步驟如下：

輸入：邊數(shù)據(jù)

輸出：組別的節(jié)點連接圖

步驟1 遍歷邊數(shù)據(jù)links，通過links.source 對象和links.target 對象，獲取組別數(shù)組nodes 及組別連接關(guān)系數(shù)組edges。

步驟2 創(chuàng)建力導向布局，將nodes 和edges 作為布局轉(zhuǎn)換數(shù)據(jù)，設(shè)置相關(guān)的布局參數(shù)。

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

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

（5）信息視圖。利用輕量級的圖形用戶界面庫dat.GUI，顯示網(wǎng)絡(luò)的屬性信息，提供定制化的視覺特性設(shè)置。對d3的brush設(shè)置監(jiān)聽事件，實現(xiàn)基于特征參數(shù)的直方圖過濾。

4 系統(tǒng)功能比較與案例分析

本文設(shè)計并實現(xiàn)了如圖8的網(wǎng)絡(luò)結(jié)構(gòu)可視化系統(tǒng)，通過與Gephi 的功能比較和案例分析驗證了系統(tǒng)的合理性和有效性。

圖8 系統(tǒng)界面圖

4.1 與Gephi的功能比較

4.1.1 布局方式比較

（1）Gephi布局方式

Gephi 提供了高效的布局算法，其強大的OpenGL渲染引擎能夠?qū)崟r分析超大規(guī)模的網(wǎng)絡(luò)。Gephi提供了多種布局方式，包括力導向布局、圓形布局、大圖網(wǎng)格布局等，允許用戶通過調(diào)整布局參數(shù)來影響布局效果，圖9（a）是力導向布局的結(jié)果。

（2）本文布局方式

本系統(tǒng)首先會依據(jù)節(jié)點的屬性對網(wǎng)絡(luò)進行分層，然后使用圓環(huán)表示成分，最后根據(jù)成分的結(jié)構(gòu)特征自動選擇布局方式（如圖9（b））。

圖9 布局方式比較

比較：得益于內(nèi)置OpenGL 引擎和高效算法的支持，Gephi能夠?qū)崟r處理大規(guī)模的網(wǎng)絡(luò)數(shù)據(jù)，但Gephi不能展示多層網(wǎng)絡(luò)。本系統(tǒng)的優(yōu)勢體現(xiàn)在：（1）通過對網(wǎng)絡(luò)分層，能直觀展示多層網(wǎng)絡(luò)結(jié)構(gòu)。（2）圓環(huán)表示成分的方法，一方面降低了成分間的視覺干擾，另一方面加快了信息獲取的效率。（3）根據(jù)成分的結(jié)構(gòu)特征，自動選擇布局方式。

4.1.2 交互方式比較

（1）Gephi交互方式

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

（2）本系統(tǒng)的交互

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

比較：Gephi作為通用的網(wǎng)絡(luò)結(jié)構(gòu)可視化工具，功能豐富、適用性強，能滿足大部分應(yīng)用需求。本系統(tǒng)根據(jù)實際場景需求，設(shè)計了靈活的交互方式，能幫助用戶更好地理解數(shù)據(jù)，發(fā)現(xiàn)其中潛在的規(guī)律。

4.2 案例分析

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

圖10 分析流程圖

4.2.1 中外電影合作交流的關(guān)鍵人物

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

圖11 網(wǎng)絡(luò)分層

4.2.2 驗證網(wǎng)絡(luò)基本性質(zhì)

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

圖12 網(wǎng)絡(luò)性質(zhì)分析

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

4.2.3 交互式探索分析

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

圖13 瀏覽探索網(wǎng)絡(luò)結(jié)構(gòu)

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

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

圖14 邊交叉中的視覺混淆

圖15 特征參數(shù)

5 結(jié)束語

本文根據(jù)需求設(shè)計并實現(xiàn)了一個基于B/S構(gòu)架的網(wǎng)絡(luò)結(jié)構(gòu)可視化系統(tǒng)。通過與Gephi 的功能比較和案例分析，驗證了系統(tǒng)的合理性和有效性。其優(yōu)點表現(xiàn)在：

（1）系統(tǒng)采用B/S構(gòu)架，具有部署簡單、不依賴特殊環(huán)境、跨平臺等優(yōu)點。

（2）針對單層網(wǎng)絡(luò)無法顯示多層網(wǎng)絡(luò)信息，設(shè)計了一種多層網(wǎng)絡(luò)的可視化方法。

（3）根據(jù)網(wǎng)絡(luò)的結(jié)構(gòu)特點，自動選擇布局方式。根據(jù)實際的分析需求，提供了大量的交互方式。

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