基于D3.js的社會網絡關系可視化研究

宿培成

（中國社會科學院大學 北京市 102488）

數據可視化是指借助圖像化的方式將抽象的數字化結果展示的過程，它可以讓人們對數據的規律和變化區域有一個更加直觀的認知，并對數據變化的規律有一個更加準確的認識。

社會網絡分析是西方社會學的一個重要分支，是一種研究社會科學的新范式，它是由多個社會成員及其之間的關系組成。社會中每個成員都是網絡中的一個節點，成員之間的關系構成了網絡的連線。社會網絡分析關注人們之間的互動和聯系。社會人物之間的關系是分析社會信息傳遞的重要途徑。社會關系包括朋友關系、同學關系、工作關系。深入研究深灰網絡能夠揭示社會網絡演化的內在機制、還可以為各種社會演化關系提供參考。使用可視化技術對社會網絡關系進行可視化能夠更加清晰的展示人物之間的關系和規律。

本文以D3.js 可視化庫為基礎，通過設定相關的人物和關系的導入方式，讓社會網絡關系能夠以力導向圖的形式展示，讓研究者和使用者能夠更加直觀得對人物關系進行分析和總結。

1 相關理論介紹

1.1 D3.js

D3.js 是最流行的可視化庫之一，它被很多其他表格插件所使用的，它允許綁定任意數據到DOM，然后將數據驅動轉換到Document 中。基于該可視化庫，我們可以使用一個數組動態創建HTML 表格，并和網頁中的元素做交互。

D3.js 是一個開源JavaScript 庫，用于瀏覽器中創建交互式可視化。JavaScript 是目前最流行的網頁腳本語言，主要用于和網頁中的元素和樣式進行無縫交互，很多絢麗的動態網頁元素都是由JavaScript 制作的。它一方面可以對網頁中的元素進行添加、刪除和修改；另一個方面也可以對層疊樣式表（CSS）中的樣式進行修改。所以很多網頁可視化工具都是基于JavaScript 開發。由于D3.js也是Javascript 庫，所以它可以被很容易地應用在各個平臺的web開發，包括PC 端和移動端。

除此之外，D3.js 還是基于CSS 選擇器，允許我們選擇網頁中的一個或多個元素。允許我們修改、追加、刪除與預定義數據集相關的元素，這就為我們動態修改網頁中圖形的樣式提供能了功能基礎。

1.2 力導向圖

力導向圖是一種用來呈現復雜關系網絡的可視化表達工具。在該可視化工具中，網絡中的美國也能節點都可以被看作是一個放電粒子，粒子之間存在一定的斥力和引力。當粒子之間的距離過近時，它們之間主要存在的互斥力；當粒子之間的距離過遠時，它們之間主要存在吸引力。需要注意的是：只有關聯的粒子才存在上述關系，沒有關聯的粒子是不存在上述關系的。

在系統運行之初，每個粒子以混沌的狀態隨機出現在場景中的各個位置，然后在上述兩個力的相互作用下逐漸呈現平衡狀態并最終停止運動。由于這種特定的運動規律，使得力導向圖可以很多的對粒子的聚類效果進行展示，從而使研究人員可以便捷得看出點與點之間的親疏關系。這種模式和特性特別適合于展示社會網絡中成員之間的關系，故本文采用力導向圖作為社會網絡關系可視化的基礎。

2 實現框架和方法

數據可視化是以圖形或圖形格式呈現數據，數據可視化的主要目標是通過統計圖形、圖表和信息圖形清晰地傳達信息。社會網絡分析以社會網絡中的參與者為節點，以參與者之間的關系為連線，最終形成一個完整的無向連接網絡圖。僅僅畫出參與者的網絡連接結構是不能滿足分析需求的，直觀的人物網絡關系圖是雜亂的，沒有規律可循的。研究人員需要玩過關系圖中尋找出有價值的聚合規律，從而使得研究人員可以很直觀的看出哪些成員之間的關系緊密，哪些成員之間的關系松散，哪些成員之間可以通過中間節點建立聯系。所以對社會網絡關系的可視化需要滿足以上幾點要求。力導向圖在混沌平衡關系理論的指導下將成員之間的親疏聚類有效地展示出來。所以力導向圖是社會網絡關系可視化的最佳工具。

D3.js 可視化庫已經將力導向圖的繪制功能封裝在庫包之中，有效地調用相關工具可以將相應的社會成員和關系導數入系統即可實現網絡關系的可視化。使用D3.js 做可視化工具需要依托Web 瀏覽器，在網頁上進行相關內容展示。本文將使用HTML5 和D3.js在網頁上進行內容呈現。

使用HTML5 進行D3.js 進行可視化顯示需要首先在頁面中添加Canvas 元素。Canvas 元素為HTML5 為Javascript 在網頁上繪制圖像的入口。Canvas 是一個矩形區域，通過Javascript 可以在其中繪制路徑、圖形、字符等元素。所以使用HTML5 進行D3.js 展示的第一步是在網頁中添加Canvas 元素。具體添加方式為：

＜canvas id="myCanvas" width="200" height="100">＜/canvas>

使用Javascript 操作canvas 元素方式是根據canvas 的id 來定位，并以此為基礎創建Context 對象，具體代碼是：

var c=document.getElementById("myCanvas");

varcxt=c.getContext("2d");

使用D3.js 操作Canvas 的方式是通過append 的方式在body 中自定義canvas 畫板，然后forceSimulation()函數構建力導項目對象。D3 已經將相關的資源和繪制方式都進行了封裝，所以需要將相關的節點和關系導入到系統中。D3 使用JSON 格式進行數據導入和管理，具體的數據形式為：

需要注意的是邊長對力導向圖的繪制結果有著很重要的影響，初始的邊長是需要作者根據經驗給出，最終的邊長效果會隨著系統優化自動確定。為了讓繪制效果更佳直觀，需要將邊長的值設定的大一些，才能在最終的結果中得到一個有效的展示。

在完成數據導入之后就可以使用forceSimulation 對象進行結點和邊數據的生成，結點數據和邊數據的生成方式如下所示：

有了結點和邊數據后，可以使用相關函數進行圖形繪制，具體的繪制方式如下所示：

以上是使用D3 進行社會網絡關系可視化的主要實施環節。在完成相關輸出設置后即可以完成圖形的繪制。

3 實驗結果和總結

為了對社會網絡關系進行有效的可視化呈現，本文研究了基于D3.js 的社會網絡關系的可視化方法。該方法以D3.js 中封裝的力導向圖庫為基礎，通過設置相應的數據填充方式完成數據的錄入和最終的可視化展示。本文從在線論壇中抓取部分用戶數據進行圖形繪制，這些數據包括用戶的姓名和用戶之間的關系。這些關系有同事、同學、舍友、朋友等關系。圖1 是基于力導向圖的社會網絡關系的可視化結果，從圖中可以看出每個社會成員都以圓點的形式呈現出來，人員之間的關系都以聯系的方式呈現出來，并且人員之間的關系類型都在連線上標記出來。需要注意的是關系緊密的用戶被繪制的相近的區域，關系不緊密的用戶被繪制在相距較遠的區域，這樣研究人員可以通過這個圖對現有人員關系做出有效的分析和判斷。并且沒有直接聯系的成員之間可以通過中間節點找到連接關系，處于中間節點的成員成為社會網絡中的關鍵結點。這些關鍵結點不但是網絡中的關鍵結點還是網絡中的有影響力的結點。這些成員在社會網絡的信息傳播過程中有非常重要的影響力。在發生社會網絡事件時，這些關鍵結點對信息的傳播有比較重要的影響。如果需要對網絡輿情的動向進行引導，可以對這些結點進行引導，從而實現有效的網絡輿情治理。

圖1：人物關系網絡圖例

除了靜態結果展示之外，力導向圖還可以允許用戶動態拖拽，這樣研究人員可以在更多視角下分析社會成員之間的關系。隨著用戶的拖拽，社會成員之間的連線長度也會發生改變，雖然連線的長度有改變，但是成員之間的聚類關系并沒有改變，所以研究人員對社會網絡的分析會更加明確。

從實驗結果可以看出使用D3.js 對社會網絡關系進行可視化是一個非常有效的途徑，但是成員之間的聯絡關系只考慮之間關系，沒有考慮用戶之間的連接頻率。如果成員之間只有關系沒有聯系，它的實際社會影響力也是有限的。因此在今后的社會網絡可視化研究中將增加連接頻率的聯系，從而使有影響力的網絡關鍵結點更加重要。