作者 | 巍耀 誠威

知識圖譜可視化可以更直觀地查看和分析知識圖譜的數據。本文主要介紹了美團平臺在布局策略、視覺降噪、交互功能、可視化敘事、3D圖譜可視化等方面的一些實踐和探索，同時沉淀出了uni-graph圖可視化解決方案，并支持了美團的很多業務場景，包括美團大腦、圖數據庫、智能IT運維、組件依賴分析、行業領域圖譜等。希望能對從事知識圖譜可視化方向的同學有所幫助或啟發。

1 知識圖譜可視化基本概念

1.1 知識圖譜技術的簡介

知識圖譜（Knowledge Graph）是人工智能的重要分支，它是一種揭示實體之間關系的語義網絡，可以對現實世界的事物及其相互關系進行形式化地描述。舉個例子，“孫悟空的師傅是唐僧”就是一條知識。在這條知識里，有“孫悟空”和“唐僧”兩個實體，“師傅”是描述這兩個實體之間的關系，上述內容在知識圖譜中就組成了一個SPO三元組（Subject-Predicate-Object）。所以，對于現實世界中實體之間的關聯關系，用知識圖譜進行描述的話，就顯得非常合適。正是由于知識圖譜的這種優勢，這項技術得到迅速普及，目前在搜索、推薦、廣告、問答等多個領域都有相應的解決方案。

1.2 知識圖譜可視化的簡介

可視化，簡單來說就是將數據以一種更直觀的形式表現出來。其實，我們現在常用的折線圖、柱狀圖、餅狀圖（下稱折柱餅），甚至Excel表格，都屬于數據可視化的一種。以往，我們存儲數據主要是以數據表的方式，但這種方式很難結構化地存儲好知識類型的數據。對于關系類型的數據，如果用前文的例子為基礎并補充一些相關信息，經過可視化后就能展示成這樣：

西游記中人、物關系

這種信息就很難用“折柱餅”或者表格呈現出來，而用知識圖譜可視化的方式呈現，就非常的清晰。

2 場景分析與架構設計

2.1 場景需求分析

我們梳理后發現，在美團的各個業務場景中知識圖譜可視化需求主要包含以下幾類：

• 圖查詢應用：以圖數據庫為主的圖譜可視化工具，提供圖數據的編輯、子圖探索、頂點/邊信息查詢等交互操作。
• 圖分析應用：對業務場景中的關系類數據進行可視化展示，幫助業務同學快速了解鏈路故障、組件依賴等問題。
• 技術品牌建設：通過知識圖譜向大家普及人工智能技術是什么，以及它能做什么，讓AI也具備可解釋性。

2.2 技術選型與架構設計

在圖關系可視化上，國內外有很多圖可視化的框架，由于美團的業務場景中有很多個性化的需求和交互方式，所以選擇了D3.js作為基礎框架，雖然它的上手成本更高一些，但是靈活度也比較高，且功能拓展非常方便。D3.js提供了力導向圖位置計算的基礎算法，同時也有很方便的布局干預手段。于是，我們基于D3.js封裝了自己的知識圖譜可視化解決方案——uni-graph。整體的功能與架構設計如下圖所示，下面我們會介紹一些uni-graph的功能細節和可視化的通用技術策略。

架構圖

3 技術挑戰與方案設計

3.1 布局策略

在不同類型的知識圖譜中，因數據差異較大，對布局效果的要求也有所不同。能讓業務數據有合適的布局來做可視化呈現，是一項比較大的技術挑戰。除了下面幾種基本的布局之外，我們還探索了一些特定場景下的布局方案。

布局策略-基礎布局

提取數據特征優化布局

D3.js提供的力導向圖模塊（d3-force）實現了一個velocity Verlet數值積分器，用于模擬粒子的物理運動。在不做過多干預的情況下，會根據節點與邊的關系模擬物理粒子的隨機運動。D3.js的力導向圖提供的力學調參項主要包括Centering（向心力）、Collision（碰撞檢測）、Links（彈簧力）、Many-Body（電荷力）、Positioning（定位力）。如何針對不同的節點進行合適的力學干預，是讓布局更符合預期的關鍵。一般來講，同一業務場景的圖譜結構都具有一定的相似性，我們考慮針對業務特定的數據結構特征來做定制化的力學調優。這里舉一個簡單的場景進行說明，我們抽象出了在樹中才有的層級和葉子節點的概念，雖然部分節點會互相成環，不滿足樹的定義，但是大部分數據是類似于樹的結構，這樣調試后，展示的關聯關系就會比隨機布局更加清晰，用戶在尋找自己需要的數據時也會更快。

布局策略-基于數據特征優化其實，美團的各個業務場景都有個性化定制布局的需求，這里只是拿其中一個最簡單的場景進行說明，uni-graph能夠將力學參數調整的模塊獨立出來，并且梳理出一些常用的參數預設，可以支撐很多場景的布局優化。

層級數據布局方案

在很多業務場景中，用戶更傾向于采用分層的方式來觀察圖譜數據，因為這樣有利于理解和分析圖譜數據，比如：根據用戶探索路徑分層、邊關系聚合分層、業務屬性歸類分層、指定中心點路徑分層等等，這些需求對圖譜的樣式和布局形式提出了更高的要求。得益于D3.js力學布局的靈活性和拓展能力，我們在業務實踐的過程中實現了幾種常用的布局方案：

布局策略-層級布局-1

布局策略-層級布局-2

以聚簇層布局為例，我們簡單介紹一下實現過程：

首先處理圖譜數據，將中心節點關聯的子節點按關聯關系歸類，生成聚簇邊和聚簇邊節點，同時將子節點分層。還需要自定義一種聚簇力，聚簇力包含三個參數ClusterCenter、Strength、Radius，對應聚簇中心、力的強度、聚簇半徑。在力學初始化時，我們為每個子節點定義聚簇中心節點和聚簇半徑。最后在力學布局的Tick過程中，先計算子節點與其聚簇中心節點坐標偏移量，然后根據偏移量和聚簇半徑的差值來判斷節點的受力方向和大小，最終經過向量計算得出節點的坐標。

布局參數配置化

在特定領域的圖譜可視化中，通常采用一兩種布局即可滿足用戶的展示需求，因為這些場景下的圖譜的關系結構相對固定。但作為平臺性質的工具，就需要展示多個領域的圖譜。為了更清晰地展現出各領域圖譜的特點，布局形態就需要跟隨圖譜而變化。針對這種場景，我們實現了多項布局參數的配置化，用戶可以根據領域圖譜的特點優化布局參數，并作為配置保存下來。領域圖譜可視化-網格布局參數調整

布局策略-參數配置化

圖數據庫可視化-布局樣式參數調整

布局策略-圖數據庫服務鏈路可視化-平鋪層布局參數調整布局策略-服務鏈路

3.2 視覺降噪

在用戶使用可視化應用時，文字/節點/邊等元素內容混雜在一起，如果沒有做好信息的表達和呈現，會直接影響到用戶的使用體驗和使用效率。經過分析，我們發現這是因為在可視化過程中產生的視覺噪聲太多，而通過可視化帶來的有效信息太少。下面將舉例展示什么叫做視覺噪聲：

視覺降噪-視覺噪聲

在以上幾張圖中，雖然將知識圖譜的數據呈現了出來，但是元素數量非常多，信息雜亂，給用戶的觀感是“眼花繚亂”。下面我們會介紹針對這類問題的解決方案。

文字處理

文字主要用在節點和邊的描述上，雖然它能提供非常重要的信息，但是節點多了后，文字會在所難免的相互重疊，而重疊后的文字很難快速識別出來，不僅起不到傳遞信息的作用，反而會造成很差的視覺體驗。為此，我們需要對文字進行遮擋檢測，根據文字的層疊關系，將置于底部的文字透明度調低，這樣即使多層文字重疊后，置于頂層的文字依然能被快速識別。

視覺降噪-文字-對比

但這種解法的時間復雜度會隨著節點的增多逐漸變得不可控。假如我們有100個節點，最多需要O(n!)的時間復雜度才能計算完畢。我們這里采用柵格劃分的方式來做優化，先對畫布進行柵格劃分，然后確定節點所在的一個或多個柵格，在進行碰撞檢測的時候，只需要和自己同柵格的節點做對比即可，因為不同柵格內的節點一定不會出現碰撞的情況。

視覺降噪-文字-柵格劃分

這種柵格劃分的理論基礎就是四叉樹碰撞檢測，我們在此基礎上做了進一步的優化。由于需要進行遮擋檢測的元素是文字類型的節點，這種節點的特點是長比寬大很多。如果按照傳統的四叉樹分割算法，就會造成很多文字節點橫跨多個柵格，對比的次數較多。在檢測前，我們先計算出所有文字節點的平均長寬比，每次柵格劃分是橫向還是縱向，取決于哪個方向劃分后柵格的長寬比更靠近文字的平均長寬比，這樣做就會減少文字節點橫跨多個柵格的情況，從而減少了每次需要被碰撞檢測的節點數量。

視覺降噪-文字-四叉樹

邊處理

多邊散列排布

知識圖譜中存在包含大量出（入）邊的中心節點，在對這些中心節點的邊進行可視化展示時，往往會出現邊與中心節點聯結處（Nexus）重疊交錯在一起的情況，進而影響視覺體驗。針對這種特殊場景，我們設計了一種多邊散列排布的算法，通過邊夾角偏移量計算和節點半徑裁剪，將Nexus分散排布在節點周圍，減少邊線重疊的情況，以達到更清晰的視覺效果：

邊處理-散列排布

多類型可調節邊

我們還實現了多種類型的邊，并支持通過參數配置的方式來調整邊的樣式，比如：貝塞爾曲線控制點、弧度、自旋角度等參數，以滿足各種復雜圖譜的可視化場景。

邊處理-多類型邊

通過多邊散列排布，改變邊線類型，并調整樣式參數，下面是我們將圖譜中凌亂無序的邊線優化后的效果：

邊處理-最終對比

3.3 交互功能

合適的圖譜布局能更好地表達出數據的含義，通過視覺降噪可以進一步讓圖譜傳遞出更多的有效信息。但是用戶依然需要通過交互找到自己關心的信息，一個圖譜可視化工具是否好用，交互功能會起到非常重要的作用。目前，我們實現了下面的基本交互功能：

• 畫布操作：拖動、縮放、動態延展、布局變換、多節點圈選。
• 元素（節點和邊）操作：樣式配置、懸浮高亮、元素鎖定、單擊、雙擊、右鍵菜單、折疊/展開、節點拖動、邊類型更改。
• 數據操作：節點的增刪改查、邊的增刪改查、子圖探索、數據合并、更新重載。

除了上述的基礎交互功能外，我們還探索了一些特殊場景的交互。在圖譜可視化中交互的目的，是為了從龐大的知識圖譜中找到自己關心數據的關聯關系，同時也能夠觀察到這些關聯關系在全局畫布中的位置。

路徑鎖定

通過選取不同的節點，自動計算出節點之間的合適路徑，做鎖定展現，方便觀察兩個或多個節點是如何關聯起來的。

交互功能-路徑鎖定

聚焦展現

對于當前不關注的圖譜區域，默認布局可以密集一些來節省畫布空間，關注某個區域后，會對當前關注的一小塊區域重新布局，讓節點排布分散一些，方便查看文字的內容。

交互功能-聚焦展現

其實，無論可視化的節點與邊的數量有多龐大，當深入到業務細節中的時候，使用者關注的節點數量其實不多，重點是把使用者關心的數據從大量數據中篩選出來，并且做好清晰地呈現表達。

3.4 美團大腦可視化

美團大腦-主界面

美團大腦是圍繞吃喝玩樂等多種場景，構建的生活娛樂領域超大規模知識圖譜，為用戶和商家建立起全方位的鏈接。為了讓美團大腦的能力更容易的被理解和使用，我們需要通過知識圖譜可視化的方式讓美團大腦更具象化，并開發出便捷的知識圖譜查詢應用。在開發知識譜圖可視化功能之前，還需要具備一些通用可視化能力。下面主要介紹一下多屏適配和動畫相關的技術能力。

多屏適配方案

美團大腦呈現的終端場景非常復雜，有PC/Mac端屏幕、大屏電視、巨型寬屏等。各個屏幕的尺寸比例都有所不同，為了保持統一觀感，不能出現滾動條、不能有邊緣留白、不能壓縮變形。同時在一些重要場合的巨型寬屏上，還要對細節做特定的適配。通過sass的函數和mixin功能可以較好地完成非等比縮放和個性化適配的需求。

code-sass

• 非等比縮放：在長寬都需要考慮的縮放場景中，使用基于視口百分比的單位vh、vw很合適，設計稿尺寸為1920 * 1080，可以通過轉換函數自動計算出對應的vh、vw值。其中為了保證字體大小在不同尺寸的屏幕上更符合預期，會用設計稿里的高為基礎單位做rem的指導參數。
• 個性化適配：在超寬的大屏尺寸下，按照比例自動縮放，在某些元素上視覺效果并不是特別完美，上面的mixin可以很方便地在CSS中對特定尺寸的屏幕做個性化適配。 
• 像素級還原：針對不同尺寸的設計稿校準時，有些元素會帶有陰影效果或者是不規則圖形，但是設計師只能按照矩形切圖，導致Sketch自動標注的數據不準確。這時可以把瀏覽器的尺寸設置成與設計稿一致，再蒙上一層半透明的設計稿圖片，逐個元素做對齊，就可以快速對不同尺寸屏幕的設計稿做像素級還原。

這套大屏適配技術方案支撐了美團大腦歷次的版本迭代。此前在參展亞洲美食節時，由于會場搭建情況比較復雜，屏幕分辨率經歷了多次變更，只花費了0.5人日就做到了各種不同分辨率的定制、開發和適配工作。

美團大腦-多屏適配現場效果

美團大腦-多屏適配-現場

動畫腳本自動化

與靜態可視化界面相比，動態可視化或者交互式可視化有更好的視覺效果，并且能傳遞給觀看者更多的信息。

靜態效果對比動態效果

此外，美團大腦在展出過程中部分時間是無人值守的，而有了動態可視化后，還需要自動播放循環動畫，因此就有了動畫腳本自動化的需求：

• 在無人操作時，按照配置好的動畫腳本循環執行。
• 用戶與應用交互時，能夠自動將動畫停止。
• 有便捷的方式重新運行動畫或進行任意場景的轉跳。

美團大腦的動畫效果具有以下幾個特點：

• 動畫類型多樣化，包含3D類型、DOM Animation、SVG Animation、第三方Canvas組件、Vue組件切換。
• 多個動畫模塊之間有銜接依賴，動畫執行可以暫停和開始。
• 不同模塊的動畫之間需要相互通信。

我們將每個動畫都封裝成一個函數，初期使用了setTimeout和async function的方案：setTimeout：可以管理簡單的動畫執行，但是只要前面的動畫有時間上的變動，后續所有動畫setTimeout的delay參數都需要改，非常麻煩。async function：將動畫都封裝成返回Promise的函數，可以解決多個動畫模塊依賴的問題，這個方案對不同動畫模塊開發者的協作效率有很大的提升，但是依然無法暫停和取消動畫。

code-js異步async function的方案已經比較好用了，但是主要問題是一旦執行就不能暫停或取消，因此我們基于generator function封裝成了類async function，可以做到隨時暫停或取消，下面是使用封裝的異步動畫調度器與各種工具helper寫的動畫模塊業務代碼。

code-vue實踐

整體方案主要有以下幾個功能：

• $ae是基于generator function封裝的異步工具庫async-eraser，CancelToken是停止生成器運行的取消令牌。
• 定制開發了支持異步事件的EventEmitter，emit函數會返回一個Promise，resolve時就會得知emit的動畫已經執行完畢，使Vue跨組件的動畫調度更容易。
• Vue組件卸載時會自動off監聽的事件，同時也能自動停止當前組件內的動畫調度器。
• 監聽DOM的transitionend和animationend事件，自動獲取CSS動畫執行結束的時機。

通過上述方案，我們讓開發動畫模塊的同學像寫異步函數一樣寫動畫模塊，極大地提高了動畫模塊的開發效率，讓每個同學的精力都放在動畫細節調試上，下面是最終的實現效果：

美團大腦-總體效果

美團大腦功能交互

美團大腦-功能交互

因為美團大腦不僅要參加各類活動與展會，還要服務于同事們的日常工作，幫助大家便捷的查詢出POI的知識圖譜數據，最終效果如上圖所示。它主要有以下功能和交互：

• POI信息查詢：星級、評論數、均價、地址、分項評分、推薦理由。
• 知識圖譜可視化：成簇布局、環路布局、節點尋路算法、畫布的縮放與拖拽、節點鎖定操作、聚焦呈現。
• 輔助信息：推薦菜、菜品標簽、店鋪標簽詞云、情感曲線、細粒度情感分析、相似餐廳。

3.5 可視化敘事的探索

美團大腦是我們團隊第一個知識圖譜可視化項目，通過該項目的實踐，我們積累了一些可視化基礎能力和知識圖譜可視化的優化策略，讓開發效率得到了極大的提升，同時團隊開始考慮在交互和表現形式上做進一步的突破。我們也搜集到一些反饋，發現很多人依然對知識圖譜這項技術是什么和能做什么了解得不是很清楚。經過團隊的頭腦風暴，我們認為核心原因是AI技術高深復雜，難以具象化，需要對真實場景進行還原。剛好，知識圖譜相對于其他的技術而言其可解釋性更強，于是我們決定進行可視化敘事的研發。數據可視化敘事（Visual Data StoryTelling）是通過隱喻對數據進行可視化，并以可視化為手段，向受眾講述數據背后的故事。下面舉個例子，來對比一下純文字與可視化敘事的不同：

可視化敘事可以看到，可視化敘事的形式要比文字更直觀，能更清晰地讓觀看者了解數據背后的故事，還可以通過動效將重點信息呈現，引導用戶按照順序了解故事內容。下面我們會介紹幾個在可視化敘事中開發動效的思路。

掃光效果

掃光效果對視覺觀感的提升和視覺重點的強調非常有效，我們在做掃光效果的輪廓元素上，需要設計師提供兩個文件，一個是輪廓的背景圖片，一個是帶有輪廓path的svg。經過技術調研，我們發現可以通過svg漸變或者蒙版來進行實現。

SVG漸變

掃光-漸變SVG蒙版

掃光-蒙版漸變方案用在彎曲角度較小的輪廓元素或圖譜的邊上沒有問題，不過漸變只能線性的從一側到另一側，如果應用到彎曲角度較大的邊上，漸變效果會不連續。

掃光-漸變-缺點綜合分析一下兩種方案，蒙版方案更加靈活，漸變性能更好。由于我們的場景可以規避弧度過大的邊，因此我們選擇了性能更好的漸變方案。

動效節奏調試

一個動效是否有節奏，對于觀看者的體驗影響非常大，但是節奏感是一個非常難掌握的東西，這里推薦兩個輔助工具：animejs和貝塞爾調節。這兩個工具能夠給大家帶來很多靈感，同時可以讓設計師自己利用工具調試出或者找到期望的動效，降低動畫開發的協作成本，這里展示一個使用貝塞爾函數實現的動效：

貝塞爾可視化敘事效果我們為知識圖譜的可視化敘事設計了幾個典型場景，對日常生活中的找店游玩、商戶經營分析等需求進行情景再現，直觀地將知識圖譜是如何服務真實場景的需求展現出來，以下是可視化敘事的效果：

可視化敘事-總體效果

3.6 3D可視化場景的探索

上面介紹的都是在2D場景下知識圖譜可視化的開發經驗，為了實現更好的視覺效果，我們還探索了3D場景的技術方案。我們選擇了vasturiano的3d-force-graph，主要原因如下：

• 知識圖譜布局庫為d3-force-3d，是基于d3-force開發的，延續了團隊之前在D3.js方向的積累，使用起來也會更熟悉。
• 它是基于three.js做3D對象的渲染，并在渲染層屏蔽了大量的細節，又暴露出了three.js的原始對象，便于對3D場景的二次開發。

在產品與設計層面，因為我們團隊在3D可視化上的經驗比較少，就學習調研了很多優秀的作品，這里主要從Earth 2050項目獲取了一些靈感。下面介紹我們在二次開發過程中主要的優化點。

節點樣式優化

3d-force-graph中默認節點就是基礎的SphereGeometry 3D對象，視覺觀感一般，需要更有光澤的節點，可以通過下面的方案實現。

• 用shader實現一個透明發光遮罩的材質。
• 用類似高爾夫的紋理讓節點更有質感。

操作雖然比較簡單，但是將關鍵節點“點亮”后，整體的視覺觀感會好很多。

3D-節點紋理

3D動效

為了在3D場景下有更好的效果，還需要添加一些動效。鏡頭游走我們利用了內置的相機進行四元數的旋轉計算。

3D-鏡頭游走

粒子飛散

在飛散的時候，我們創建隨機不可見的粒子，控制粒子數量緩慢出現，利用requestAnimationFrame向各自方向飛散。

3D-粒子飛散

產品效果與場景思考最終在CES會場效果如下：

3D-CES現場我們在研發了主要應用在技術推廣的3D知識圖譜可視化后，還考慮遷移到工具類應用中，但是發現工具類應用目前更適合2D的展示與交互，3D雖然對于空間利用率更大，但是用戶交互方式也更復雜。如果后續能思考出更高效的交互方式，我們會再次嘗試利用3D知識圖譜可視化來提升工具類應用的產品體驗。

4 落地場景

目前，知識圖譜可視化技術方案已經應用在了美團多個業務場景中，包括美團大腦、圖數據庫、智能IT運維、組件依賴分析、商品標簽管理、行業領域圖譜等。未來，我們還將探索更多的應用場景。

落地場景-1落地場景-2落地場景-3

5 未來展望

最后，展望一下知識圖譜可視化技術后面還可以探索的一些方向，我們從交互場景、效果呈現以及工具能力等三個維度進行說明。

交互場景

3D場景中的交互：在3D場景中做知識圖譜可視化視覺震撼程度更強，但是現階段實用程度還不夠，交互的效率也不如2D場景，高效的3D交互方式需要進一步探索。虛擬現實：元宇宙的概念快速帶動了VR等虛擬現實技術的發展，技術成熟后或許能帶來更好的可視化體驗。

效果呈現

大規模知識圖譜可視化：在節點數量非常多的知識圖譜可視化中，性能上的問題有WebGL、WebGPU等技術方案去解決，但是也僅限于能可視化出來，用戶已經很難找到自己需要的信息了，如何既能呈現出成千上萬的節點，又能讓用戶便捷的找到自己需要的關系數據信息很重要。布局的智能化：目前知識圖譜的布局合理性主要靠半人工干預的方式來保證，后面可以考慮針對不同的數據特征去自動匹配合適的力學布局策略，用算法智能預測出最合理的布局方式，減少開發者或用戶的干預成本。

工具能力

通用查詢工具：目前各大知識圖譜數據存儲引擎都有自己的可視化查詢工具，互不通用，也互有優缺點，如果有統一的可視化查詢語言，就能夠讓一種可視化工具適配多個存儲引擎和應用，提高工具應用的效率。