個推資深前端開發專家 東風
圖可視化應用是數據可視化的一個重要組成部分。圖指的是知識圖譜（Knowledge Graph），此概念於2012年由Google正式提出，旨在幫助Google優化搜索引擎返回的結果，提升用戶搜索質量及體驗。
個推作爲專業的數據智能服務商，在圖可視化應用方面也進行了豐富的實踐。本文將從四部分講述圖可視化應用：應用場景、組成部分、個推圖可視化組件、個推圖可視化展望。
（文末附視頻版講解及完整資料下載）
01
圖可視化應用場景
圖可視化的應用場景非常廣泛，在知識推理、數據校驗、路徑探索、生物可視化等場景都有所應用。
上圖是一個圖可視化應用的綜合案例場景，展現了一組虛擬的組織結構關係，可以進行數據校驗、關係推理。圖中，我們可以根據不同的場景需求，對人員、陣營、活動這三種不同的分類進行過濾，也可以根據實體的屬性如性別、年齡層次、興趣偏好等，篩選出自己想要的結果，如組織中的人員年齡結構、男女分佈比例等。
此外，我們還可以自主地對圖的樣式進行編輯，以及在工具欄對圖進行一些常規操作，如佈局、放大、縮小等。
02
圖可視化組成部分
圖可視化由四部分組成：數據、渲染、佈局、交互。
1、數據
在關係圖譜中，數據主要指的是關係型數據。我們將數據應用於圖譜前，需要先進行數據收集、清洗，避免無用的數據干擾可視化的解讀。
2、渲染
關係圖的渲染包括Svg、Canvas、webgl等渲染方式。
Svg渲染的優勢在於易操作、結構清晰，但處理大數據量時其瀏覽器開銷大，故不太適合數據量大的場景。
相比Svg, Canvas則更適合數據量大的場景下的渲染，但不足之處在於其結構層次比較複雜，對於交互事件的處理也比較繁瑣。
Webgl主要用於繪製3D的關係圖。
3、佈局
不同的場景需要不同的佈局。力導佈局，是通過模擬物理引擎中的庫倫斥力和胡克彈力，來計算佈局的一種方式，適用於描述現實世界中的關係遠近。樹圖佈局，則比較適合描述組織架構。有向圖佈局，適合用於繪製流程圖。
4、交互
常見的交互方式有選擇、重配、編碼、過濾、對比等等。可視化中的交互，可以緩解有限的可視化空間與數據量過載之間的矛盾。例如，對於高維數據，我們可以通過分組交互，對高維數據進行降維。此外，從交互任務的角度，用戶還可以對圖裏的每一個單項數據進行更多的操作，比如查看詳情、數據展開等。
03
個推圖可視化組件
個推在實踐過程中積累了一系列比較常用的組件，方便我們實現上述的案例。對於圖可視化而言，渲染是最重要的一步，首先需要選擇合適的數據可視化引擎。然而，市面上不同的引擎其渲染的實現方式不同。哪種引擎纔是最佳選擇呢？
我們將對這些引擎進行簡要介紹，從性能、使用方式等方面進行對比分析。
（1）AntV-G6:
AntV-G6是來自螞蟻金服的數據可視化解決方案。螞蟻金服這幾年在數據可視化的投入非常大，有g2、g6、 L7等可視化庫，使用方便，但是佈局設置不太友好，g6的文檔也不夠完善。
（2）Echarts：
Echarts是來自百度的圖表庫。所有的圖表都是配置化生成，非常方便，不足在於其擴展性較弱。
（3）D3js：
D3js是一套相對底層的圖表庫，內含座標軸、圖形、算法等基礎的元件，可以組合成任何你想要的圖表格式。D3js是基於svg去操作的，雖然後面也新增了canvas的渲染，但是從性能表現來看，尤其是數據量大的時候，svg不是很好的選擇。
（4）vis.js-network:
其優點在於高度封裝，使用方便。其力導佈局以參數的形式驅動，但存在一個問題：當點的數量超過100個的時候，會被認定開銷過高，力導佈局默認會被關閉。
（5）Cytoscape.js:
它是針對關係圖的一套解決方案，包含圖的渲染、圖的常用算法等。個推從聚合/篩選、佈局、性能以及Github的關注度幾個角度對比了visjs、Cytoscape.js、以及Antv-g6三個可視化庫，最終選擇了功能完備、擴展性更好的Cytoscape.js作爲個推組件的核心渲染。
△ 圖渲染引擎的對比
△使用方式對比
在Cytoscape.js 中，數據可以通過api添加到圖裏，或者在創建圖實例的時候自行生成。Cytoscape.js中的樣式則是以style的形式，或者添加class的形式予以生成。它的樣式儘可能遵循CSS規定。但是，CSS中的屬性不足以實現圖形某些部分的樣式，在這種情況下，Cytoscape.js將引入特有的其他屬性。
值得注意的是，這幾年Antv-g6的迭代速度非常快，其實現思路比Cytoscape.js更加模塊化。後續，個推也將持續跟進g6的發展。
個推基於Cytoscape.js的vue組件
個推在實踐過程中，開發了一個基於Cytoscape.js的vue組件，由Legend圖例、Category、Cytoscape、佈局四大模塊構成。
（1）Legend圖例：
類似echarts的圖例，具有開關、分頁、位置、方向、點擊、雙擊等功能，便於進行圖譜操作。
（2）Category：
對配置數據進行分類。支持用戶對數據維度進行劃分支持字段配置、顏色圖片配置以及其他具體的配置。
（3）Cytoscape：
剝離配置和數據，以數據驅動圖譜展示。
兼容Cytoscape.js的原生配置，包括佈局、點、線的樣式等，具體可參照Cytoscape.js官方文檔。
（4）佈局：
基於cytoscape.js插件機制的d3-force佈局，支持力導佈局，並能實時返回佈局進度。
個推實踐過程中的常見問題及應對方案
（1）應對大量數據渲染：
就渲染層面而言，由於自定義樣式的背景圖片的大小、透明度、事件的監聽等都是開銷，故我們不再考慮svg。
從佈局層面來說，可考慮方案有：前置佈局，不在渲染的時候進行實時計算，後端預渲染也不進行，又或者可以有一個用戶反饋的進度條。
但更好的方案是直接避開大量數據的渲染。我們其實並不需要讓整個屏幕都充斥着密密麻麻的點。我們可以把數據進行聚類，按需去展開、收起數據集以及路徑。
（2）Vue實例中保存cytoscape實例導致頁面crash：
該問題是Vue的watch機制導致的，因爲Vue會默認監聽實例裏面的變量，而cytoscape實例本身又包含了當前的dom實例，存在循環引用。根據vue官方文檔，我們只需要在變量前面加$或者_繞開watch機制即可。
（3）節點多個label渲染：
此項爲Cytoscape.js的短板。其label是以style的形式渲染，所以在其使用過程中並不能多個label並存，需要通過插件去渲染canvas。在g6中，用戶可以在registerNode上自行定義每一個點、線的展現形式，從而有效規避該問題。
（4）Can not create edge ** with nonexistant target：
Cytoscape.js認爲在用戶數據清洗的時候，應該清洗掉冗餘的髒數據。當出現該項報錯信息（Can not create edge ** with nonexistant target）時，Cytoscape.js會停止渲染功能，導致圖無法生成。爲防止此項報錯的發生，在使用渲染功能前，我們會先自動清洗一遍髒數據。
04
個推圖可視化展望
當我們實踐的越多，會發現可以做的更多。
1、聚類優化
比如在數據分析方面，我們可以進行聚類優化。前文提及當數據量大的時候，我們可以採用聚類的方法，然後分層次的展開。聚類有很多算法，比如基於劃分的k-mean算法。它的實現方式爲：先隨機定義分類，基於每個類的中心點，k-mean通過計算每個點到中心的距離再次重新分類，多次迭代後便完成聚類。除了基於劃分的算法，還有基於層次聚類，以及基於密度的聚類算法。
2、圖可視化配置
比如在系統方面，我們可以進行圖可視化配置，從而自定義想要的實體的顏色形狀，以及圖標、關係的線條樣式等。
3、圖可視化平臺
在平臺建設方面，我們還可以研發一套完備的圖可視化系統。上圖是neo4j的一個截圖，它在圖可視化方面的實踐已經比較深入。我們可以以neo4j爲參考，結合自身圖數據的能力，從數據錄入開始，到數據清洗，結構整合，再到分析、研判、展現，形成一整套圖可視化系統。
圖可視化是數據可視化的子領域，它通過展示元素、關係，幫助用戶實現數據的洞悉能力。依託自身海量數據的積累以及數據智能技術的沉澱，個推圖可視化已在數據校驗、知識推理等場景積累了豐富的實踐，爲這些場景提供了強大的數據支撐。未來，個推將持續打磨自身技術，在圖可視化領域不斷探索，不斷拓寬圖可視化的應用場景，並與開發者一起分享最新實踐。
完整版分享材料獲取
關注【個推技術學院】微信公衆號
（微信號：getuitech）
回覆關鍵詞“圖”
即可領取圖可視化應用完整版分享材料！
此外，通過視頻鏈接還可觀看本文配套解析：
http://live.vhall.com/728249458