基于B/S構(gòu)架的網(wǎng)絡(luò)結(jié)構(gòu)可視化系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

王 勇，王 松，張紅英

1.西南科技大學(xué) 信息工程學(xué)院，四川 綿陽(yáng)621010

2.西南科技大學(xué) 計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院，四川 綿陽(yáng)621010

1 引言

信息技術(shù)的快速發(fā)展使人們進(jìn)入了網(wǎng)絡(luò)時(shí)代，人們?cè)缫焉钤诟鞣N各樣的網(wǎng)絡(luò)世界中。作為現(xiàn)實(shí)生活中最常見(jiàn)的關(guān)系型數(shù)據(jù)，網(wǎng)絡(luò)往往隱藏了復(fù)雜的信息[1]。隨著網(wǎng)絡(luò)規(guī)模不斷擴(kuò)大，網(wǎng)絡(luò)節(jié)點(diǎn)越來(lái)越多，節(jié)點(diǎn)關(guān)系越來(lái)越復(fù)雜，傳統(tǒng)的表格+文字的表現(xiàn)形式，已無(wú)法有效呈現(xiàn)網(wǎng)絡(luò)的拓?fù)浣Y(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ò)中的個(gè)體看成一個(gè)節(jié)點(diǎn)，個(gè)體間的關(guān)系看成一條邊，那么這些節(jié)點(diǎn)和邊就可以構(gòu)成一個(gè)人物關(guān)系圖譜。圖1 是《悲慘世界》中的人物關(guān)系圖譜，使用圓形表示節(jié)點(diǎn)，直線表示邊，節(jié)點(diǎn)的顏色代表不同組別，邊的粗細(xì)代表人物間關(guān)系的親密程度。通過(guò)這個(gè)可視化例子，可以知道誰(shuí)是網(wǎng)絡(luò)的中心人物，網(wǎng)絡(luò)中存在幾個(gè)派系，人物間的親密程度。

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

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

2 相關(guān)研究

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

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

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

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

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

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

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

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

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

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

表1 節(jié)點(diǎn)屬性

表2 邊屬性

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

業(yè)務(wù)層是系統(tǒng)的關(guān)鍵層，它從數(shù)據(jù)層提取數(shù)據(jù)，并將處理的結(jié)果提交給視圖層。業(yè)務(wù)層可細(xì)分為網(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ù)計(jì)算、網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)劃分。

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

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

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

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

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

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

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

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

圖3 成分可視化流程

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

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

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

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

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

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

圖5 多樣化交互

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

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

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

圖6 魚(yú)眼交互

圖7 鄰接矩陣

3.3 視圖層

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.1 與Gephi的功能比較

4.1.1 布局方式比較

（1）Gephi布局方式

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

（2）本文布局方式

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

圖9 布局方式比較

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

4.1.2 交互方式比較

（1）Gephi交互方式

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

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

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

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

4.2 案例分析

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

圖10 分析流程圖

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

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

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

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

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

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

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

4.2.3 交互式探索分析

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

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

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

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

圖14 邊交叉中的視覺(jué)混淆

圖15 特征參數(shù)

5 結(jié)束語(yǔ)

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

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

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

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

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