作者 | 巍耀 誠威

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

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

1.1 知識圖譜技術(shù)的簡介

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

1.2 知識圖譜可視化的簡介

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

西游記中人、物關(guān)系

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

2 場景分析與架構(gòu)設(shè)計

2.1 場景需求分析

我們梳理后發(fā)現(xiàn)，在美團的各個業(yè)務(wù)場景中知識圖譜可視化需求主要包含以下幾類：

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

2.2 技術(shù)選型與架構(gòu)設(shè)計

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

架構(gòu)圖

3 技術(shù)挑戰(zhàn)與方案設(shè)計

3.1 布局策略

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

布局策略-基礎(chǔ)布局

提取數(shù)據(jù)特征優(yōu)化布局

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

布局策略-基于數(shù)據(jù)特征優(yōu)化其實，美團的各個業(yè)務(wù)場景都有個性化定制布局的需求，這里只是拿其中一個最簡單的場景進行說明，uni-graph能夠?qū)⒘W(xué)參數(shù)調(diào)整的模塊獨立出來，并且梳理出一些常用的參數(shù)預(yù)設(shè)，可以支撐很多場景的布局優(yōu)化。

層級數(shù)據(jù)布局方案

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

布局策略-層級布局-1

布局策略-層級布局-2

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

首先處理圖譜數(shù)據(jù)，將中心節(jié)點關(guān)聯(lián)的子節(jié)點按關(guān)聯(lián)關(guān)系歸類，生成聚簇邊和聚簇邊節(jié)點，同時將子節(jié)點分層。還需要自定義一種聚簇力，聚簇力包含三個參數(shù)ClusterCenter、Strength、Radius，對應(yīng)聚簇中心、力的強度、聚簇半徑。在力學(xué)初始化時，我們?yōu)槊總€子節(jié)點定義聚簇中心節(jié)點和聚簇半徑。最后在力學(xué)布局的Tick過程中，先計算子節(jié)點與其聚簇中心節(jié)點坐標(biāo)偏移量，然后根據(jù)偏移量和聚簇半徑的差值來判斷節(jié)點的受力方向和大小，最終經(jīng)過向量計算得出節(jié)點的坐標(biāo)。

布局參數(shù)配置化

在特定領(lǐng)域的圖譜可視化中，通常采用一兩種布局即可滿足用戶的展示需求，因為這些場景下的圖譜的關(guān)系結(jié)構(gòu)相對固定。但作為平臺性質(zhì)的工具，就需要展示多個領(lǐng)域的圖譜。為了更清晰地展現(xiàn)出各領(lǐng)域圖譜的特點，布局形態(tài)就需要跟隨圖譜而變化。針對這種場景，我們實現(xiàn)了多項布局參數(shù)的配置化，用戶可以根據(jù)領(lǐng)域圖譜的特點優(yōu)化布局參數(shù)，并作為配置保存下來。領(lǐng)域圖譜可視化-網(wǎng)格布局參數(shù)調(diào)整

布局策略-參數(shù)配置化

圖數(shù)據(jù)庫可視化-布局樣式參數(shù)調(diào)整

布局策略-圖數(shù)據(jù)庫服務(wù)鏈路可視化-平鋪層布局參數(shù)調(diào)整布局策略-服務(wù)鏈路

3.2 視覺降噪

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

視覺降噪-視覺噪聲

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

文字處理

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

視覺降噪-文字-對比

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

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

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

視覺降噪-文字-四叉樹

邊處理

多邊散列排布

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

邊處理-散列排布

多類型可調(diào)節(jié)邊

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

邊處理-多類型邊

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

邊處理-最終對比

3.3 交互功能

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

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

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

路徑鎖定

通過選取不同的節(jié)點，自動計算出節(jié)點之間的合適路徑，做鎖定展現(xiàn)，方便觀察兩個或多個節(jié)點是如何關(guān)聯(lián)起來的。

交互功能-路徑鎖定

聚焦展現(xiàn)

對于當(dāng)前不關(guān)注的圖譜區(qū)域，默認布局可以密集一些來節(jié)省畫布空間，關(guān)注某個區(qū)域后，會對當(dāng)前關(guān)注的一小塊區(qū)域重新布局，讓節(jié)點排布分散一些，方便查看文字的內(nèi)容。

交互功能-聚焦展現(xiàn)

其實，無論可視化的節(jié)點與邊的數(shù)量有多龐大，當(dāng)深入到業(yè)務(wù)細節(jié)中的時候，使用者關(guān)注的節(jié)點數(shù)量其實不多，重點是把使用者關(guān)心的數(shù)據(jù)從大量數(shù)據(jù)中篩選出來，并且做好清晰地呈現(xiàn)表達。

3.4 美團大腦可視化

美團大腦-主界面

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

多屏適配方案

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

code-sass

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

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

美團大腦-多屏適配現(xiàn)場效果

美團大腦-多屏適配-現(xiàn)場

動畫腳本自動化

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

靜態(tài)效果對比動態(tài)效果

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

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

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

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

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

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

code-vue實踐

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

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

通過上述方案，我們讓開發(fā)動畫模塊的同學(xué)像寫異步函數(shù)一樣寫動畫模塊，極大地提高了動畫模塊的開發(fā)效率，讓每個同學(xué)的精力都放在動畫細節(jié)調(diào)試上，下面是最終的實現(xiàn)效果：

美團大腦-總體效果

美團大腦功能交互

美團大腦-功能交互

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

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

3.5 可視化敘事的探索

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

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

掃光效果

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

SVG漸變

掃光-漸變SVG蒙版

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

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

動效節(jié)奏調(diào)試

一個動效是否有節(jié)奏，對于觀看者的體驗影響非常大，但是節(jié)奏感是一個非常難掌握的東西，這里推薦兩個輔助工具：animejs和貝塞爾調(diào)節(jié)。這兩個工具能夠給大家?guī)砗芏囔`感，同時可以讓設(shè)計師自己利用工具調(diào)試出或者找到期望的動效，降低動畫開發(fā)的協(xié)作成本，這里展示一個使用貝塞爾函數(shù)實現(xiàn)的動效：

貝塞爾可視化敘事效果我們?yōu)橹R圖譜的可視化敘事設(shè)計了幾個典型場景，對日常生活中的找店游玩、商戶經(jīng)營分析等需求進行情景再現(xiàn)，直觀地將知識圖譜是如何服務(wù)真實場景的需求展現(xiàn)出來，以下是可視化敘事的效果：

可視化敘事-總體效果

3.6 3D可視化場景的探索

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

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

在產(chǎn)品與設(shè)計層面，因為我們團隊在3D可視化上的經(jīng)驗比較少，就學(xué)習(xí)調(diào)研了很多優(yōu)秀的作品，這里主要從Earth 2050項目獲取了一些靈感。下面介紹我們在二次開發(fā)過程中主要的優(yōu)化點。

節(jié)點樣式優(yōu)化

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

• 用shader實現(xiàn)一個透明發(fā)光遮罩的材質(zhì)。
• 用類似高爾夫的紋理讓節(jié)點更有質(zhì)感。

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

3D-節(jié)點紋理

3D動效

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

3D-鏡頭游走

粒子飛散

在飛散的時候，我們創(chuàng)建隨機不可見的粒子，控制粒子數(shù)量緩慢出現(xiàn)，利用requestAnimationFrame向各自方向飛散。

3D-粒子飛散

產(chǎn)品效果與場景思考最終在CES會場效果如下：

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

4 落地場景

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

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

5 未來展望

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

交互場景

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

效果呈現(xiàn)

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

工具能力

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