作者 | 巍耀 誠(chéng)威

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

1 知識(shí)圖譜可視化基本概念

1.1 知識(shí)圖譜技術(shù)的簡(jiǎn)介

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

1.2 知識(shí)圖譜可視化的簡(jiǎn)介

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

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

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

2 場(chǎng)景分析與架構(gòu)設(shè)計(jì)

2.1 場(chǎng)景需求分析

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

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

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

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

架構(gòu)圖

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

3.1 布局策略

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

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

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

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

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

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

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

布局策略-層級(jí)布局-1

布局策略-層級(jí)布局-2

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

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

布局參數(shù)配置化

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

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

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

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

3.2 視覺(jué)降噪

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

視覺(jué)降噪-視覺(jué)噪聲

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

文字處理

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

視覺(jué)降噪-文字-對(duì)比

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

視覺(jué)降噪-文字-柵格劃分

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

視覺(jué)降噪-文字-四叉樹(shù)

邊處理

多邊散列排布

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

邊處理-散列排布

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

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

邊處理-多類(lèi)型邊

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

邊處理-最終對(duì)比

3.3 交互功能

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

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

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

路徑鎖定

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

交互功能-路徑鎖定

聚焦展現(xiàn)

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

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

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

3.4 美團(tuán)大腦可視化

美團(tuán)大腦-主界面

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

多屏適配方案

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

code-sass

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

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

美團(tuán)大腦-多屏適配現(xiàn)場(chǎng)效果

美團(tuán)大腦-多屏適配-現(xiàn)場(chǎng)

動(dòng)畫(huà)腳本自動(dòng)化

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

靜態(tài)效果對(duì)比動(dòng)態(tài)效果

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

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

美團(tuán)大腦的動(dòng)畫(huà)效果具有以下幾個(gè)特點(diǎn)：

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

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

code-js異步async function的方案已經(jīng)比較好用了，但是主要問(wèn)題是一旦執(zhí)行就不能暫?；蛉∠?，因此我們基于generator function封裝成了類(lèi)async function，可以做到隨時(shí)暫?；蛉∠旅媸鞘褂梅庋b的異步動(dòng)畫(huà)調(diào)度器與各種工具h(yuǎn)elper寫(xiě)的動(dòng)畫(huà)模塊業(yè)務(wù)代碼。

code-vue實(shí)踐

整體方案主要有以下幾個(gè)功能：

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

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

美團(tuán)大腦-總體效果

美團(tuán)大腦功能交互

美團(tuán)大腦-功能交互

因?yàn)槊缊F(tuán)大腦不僅要參加各類(lèi)活動(dòng)與展會(huì)，還要服務(wù)于同事們的日常工作，幫助大家便捷的查詢(xún)出POI的知識(shí)圖譜數(shù)據(jù)，最終效果如上圖所示。它主要有以下功能和交互：

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

3.5 可視化敘事的探索

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

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

掃光效果

掃光效果對(duì)視覺(jué)觀感的提升和視覺(jué)重點(diǎn)的強(qiáng)調(diào)非常有效，我們?cè)谧鰭吖庑Ч妮喞厣?，需要設(shè)計(jì)師提供兩個(gè)文件，一個(gè)是輪廓的背景圖片，一個(gè)是帶有輪廓path的svg。經(jīng)過(guò)技術(shù)調(diào)研，我們發(fā)現(xiàn)可以通過(guò)svg漸變或者蒙版來(lái)進(jìn)行實(shí)現(xiàn)。

SVG漸變

掃光-漸變SVG蒙版

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

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

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

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

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

可視化敘事-總體效果

3.6 3D可視化場(chǎng)景的探索

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

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

在產(chǎn)品與設(shè)計(jì)層面，因?yàn)槲覀儓F(tuán)隊(duì)在3D可視化上的經(jīng)驗(yàn)比較少，就學(xué)習(xí)調(diào)研了很多優(yōu)秀的作品，這里主要從Earth 2050項(xiàng)目獲取了一些靈感。下面介紹我們?cè)诙伍_(kāi)發(fā)過(guò)程中主要的優(yōu)化點(diǎn)。

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

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

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

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

3D-節(jié)點(diǎn)紋理

3D動(dòng)效

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

3D-鏡頭游走

粒子飛散

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

3D-粒子飛散

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

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

4 落地場(chǎng)景

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

落地場(chǎng)景-1落地場(chǎng)景-2落地場(chǎng)景-3

5 未來(lái)展望

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

交互場(chǎng)景

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

效果呈現(xiàn)

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

工具能力

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