利用d3.js對QQ群大數據資料進行可視化分析

作者: Anthr@X anthrax@insight-labs.org

背景

對于前段時間流出的QQ群數據大家想必已經有所了解了，處理后大小將近100G，多達15億條關系數據（QQ號，群內昵稱，群號，群內權限，群內性 別和年齡）和將近9000萬條群信息（群號，群名，創建時間，群介紹），這些數據都是扁平化的2維表格結構，直接查詢不能直接體現出用戶和群之間的直接或 者間接關系。通過數據可視化，可以把扁平結構的數據作為點和線連接起來，從而更加直觀的顯示出來從而進行分析。

d3.js是一個近年來推出的基于javascript的數據展示庫，全稱為Data Driven Document， 在瀏覽器數據展示領域的地位類似于通用js框架里的jQuery。d3.js的官網是d3js.org，大家可以在上面看到很多例子和應用。d3.js也 是圖形數據庫neo4j所內置的數據展示工具。

說到圖形數據庫，其實正確的翻譯應該是圖數據庫，圖即所謂的Graph，來自于數學里的圖論，比如四色定理和推銷員過橋的問題（著名的NP問題之 一）。圖數據庫著重于數據之間的關聯和屬性，對于關系錯綜復雜的關系分析效率很高。例如，我想知道誰是我朋友的朋友，并且他們有哪些朋友也認識我。對于這 種問題，普通關系型數據庫的計算復雜度是O(N^c)左右或者更高，N為選擇范圍的數據集合大小，你好友數量加上好友的好友的數量等，c為關系層數。圖數 據庫的計算復雜度在O(N^2)左右或者更低，但是基本不會超過O(N^2)。

圖數據庫對于復雜關系數據查詢起來效率高的主要原因是在數據輸入的時候就已經對關系進行了處理和索引，這樣做在查詢的時候具有很高的效率，但是在數 據導入的時候會很慢。QQ群的15億個關系在向圖數據庫neo4j里導入的時候花了3天都沒弄完，也沒有進度提示，所以后來我直接放棄了。

數據處理

在QQ群和群成員關系里面，對于層數我是這么定義的：

第1層：目標QQ加入的所有群
第2層：目標QQ加入的所有群的所有成員
第3層：目標QQ加入的所有群的所有成員加入的所有群
.
.
.

大家可以看出這樣的查詢是可以遞歸的，假設每個QQ號所加入的群數量和每個群的成員數量為N，那么查詢3層數據時總計算量為N*N*N=n^3，所以當查詢層數為c層的時候，計算復雜度是N^c。

前面說過，圖數據庫的計算復雜度一般在N^2以下，所以當使用普通的關系型數據庫的時候，如果查詢的層數不多，效率和圖數據庫比起來差不多，加上關系數據庫自帶的便于管理和導入導出的屬性，所以我還是選擇了mysql數據庫。

對于QQ和QQ群之間的關系，每個QQ號都能加入群，一個群里也有很多QQ，基本都在幾十到幾百人，所以兩個QQ號在同一個群里不一定代表他們的關 系很緊密，換句話說QQ和QQ群之間的關系相對于QQ好友而言相對較弱。但是這并不代表我們從中不能分析出有用的資料，俗話說的好，大數據就像一座金礦， 只有用力挖才能挖到金子。

d3.js支持多種數據格式，比如JSON,XML,CSV,HTML等，因為PHP的數組可以很簡單的轉換為JSON格式，所以我選擇用PHP寫 API來獲取JSON數據。QQ和QQ群是一種典型的圖數據的應用，QQ和QQ群作為節點(node)，QQ加入了哪些群作為關系 (link)，d3.js內置了一個功能很強大的內建布局，叫做Force-Directed Graph（受力導向圖），后面簡稱為force。force布局模擬了一些基本的物理粒子原理，比如引力和斥力（確切的說是模擬了電磁力和引力，在離的 遠的時候會互相吸引，在離的近的時候斥力急劇增加），并且可以調節力的大小和受力距離等等，可以說是自由度相當高。關于d3.js的force布局，在官 網有詳細的API和不少例子，這里我就不貼代碼了。

在force布局里面，數據源的JSON可以有很多種不同的格式和屬性，但是基本格式如下:

{"nodes":[{"num":10001,type:"qq"},{"num":12345678,type:"qun"}],"links":[{"source":"10001","target":"12345678","auth":1,"nick":"pony"}]}

其中nodes數組對應的是節點列表，links對應的是關系列表。

每個節點可以有很多自定義屬性，在d3.js可以針對每個節點存取節點的屬性，比如我定義num是QQ號或者群號，type代表節點是QQ還是群， 另外我在js里設定在type==‘qun’的時候顯示群的圖標，是qq的時候顯示qq的圖標。關系里面默認的屬性有source和target，分別對 應一個關系的兩頭，默認情況下關系里面的source和target對應的數字是節點在節點數組里面的位置index。但是我自定義成了qq號和群號。另 外你也可以定義其他屬性，比如auth代表這個QQ號在群里的權限，nick是群昵稱。

對于QQ群這樣的關系來說，基本上在第4層和以上的QQ和群的關系就比較弱了，所以為了提高查詢速度和減少節點數量，我只查詢2層關系（少么？不少，要想想有些群有超過500人……）。

首先，d3.js需要在瀏覽器里面運行，我的首選是Google Chrome，V8引擎的效率果然不錯，在節點和關系不多的時候基本感覺不到延遲，后來在FF和IE11里面測試了一次，FF比Chrome卡一半左右，IE的話我只能呵呵了……

先拿小馬哥做個測試，QQ號是霸氣的10001。當d3.js導入完數據JSON的時候，各種節點會在屏幕上亂飛幾秒鐘，直到他們的力達到一個穩定的平衡點。結果如下:

說明：

企鵝圖標的節點代表QQ，群圖標的節點是群(廢話么)。  
每條線代表一個關系，一個QQ可以加入N個群，一個群也可以有N個QQ加入。  
線的顏色分別代表：  
土豪金：群主  
狗腿綠：群管理員  
屌絲藍：群成員

大家也可以看到，群主和管理員的關系線也比普通的群成員長一些，這是為了突出群內的重要成員的關系。

圖標旁邊自動標注了QQ號和群號，如果有的話還有群名。沒有在QQ號旁邊標注昵稱是因為很多人加入不同的群使用的是不同昵稱，所以把昵稱放到了其他的地方顯示。

在下圖中大家可以隱約的看到，所有的關系都是以QQ 10001為起點的。

在圖上節點是可以拖拽的，拖拽后會固定在你釋放的地方。我們把幾個群稍微拖的分開一點，關系就一目了然了

這個時候我們可以看到在目標的QQ群里也有很多共同QQ號，比如有些QQ號同時加入了2，3個群。群名顯示的都是各種產品開發討論群，這些同時加入2，3個產品群的人估計不是產品經理就是主管吧……、

鼠標懸停到群圖標上可以看到群的詳細信息(如果有的話)

因為很多人在不同群里的昵稱不一樣，所以群內昵稱等信息就只能放到link上面了，因為線比較細，所以鼠標比較難對準，這個功能還待修改。

這個家伙和小馬哥一起同時在3個群里，好基友？

小馬哥的QQ群信息展示完了，下面我們來看看更加實際的應用，比如把某圈子里的人找出來。我們先從某土豪大黑闊大牛的QQ號入手：

初始數據好多……此大黑闊加入的群夠雜的，不過就是因為雜所以才能更深入的了解一個人的所有喜好。看看群名神馬的，我好像看到了dota，XX國際 俱樂部，web技術交流，XXsec等群……充分說明了此人……是個屌絲技術宅大黑闊，XX國際俱樂部又似乎帶著那么種高大上的感覺……

圖中錯綜復雜的各種關系組成了一朵朵盛開的菊花，向我們訴說著他的歷史……

為了理清他那不堪回首的過去和關系網，我特地把瀏覽器窗口拖到第二個屏幕上，然后把群挨個分開。為了保護當事人的隱私，這張圖我打碼了。

這張圖比較寬，建議大家下載下來放大看

右鍵點擊可放大

總結

假如把層數擴展到4層，不知能否篩選出中國所有黑闊的QQ號呢？至少我已經在這張圖里看到了很多熟悉的名字和號碼。

騰訊總是說漏洞早已修復，不存在問題了，廣大網民放心，但實際上信息泄露這種事情，豈是你漏洞修復好了就結束了的事情？

End.