常识图谱可视化能够更直观地查看和剖析常识图谱的数据。本文次要介绍了美团平台在布局策略、视觉降噪、交互性能、可视化叙事、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 力学布局的灵活性和拓展能力，咱们在业务实际的过程中实现了几种罕用的布局计划：
以聚簇层布局为例，咱们简略介绍一下实现过程：
首先解决图谱数据，将核心节点关联的子节点按关联关系归类，生成聚簇边和聚簇边节点，同时将子节点分层。还须要自定义一种聚簇力，聚簇力蕴含三个参数 ClusterCenter、Strength、Radius，对应聚簇核心、力的强度、聚簇半径。在力学初始化时，咱们为每个子节点定义聚簇核心节点和聚簇半径。最初在力学布局的 Tick 过程中，先计算子节点与其聚簇核心节点坐标偏移量，而后依据偏移量和聚簇半径的差值来判断节点的受力方向和大小，最终通过向量计算得出节点的坐标。
布局参数配置化
在特定畛域的图谱可视化中，通常采纳一两种布局即可满足用户的展现需要，因为这些场景下的图谱的关系构造绝对固定。但作为平台性质的工具，就须要展现多个畛域的图谱。为了更清晰地展现出各畛域图谱的特点，布局状态就须要追随图谱而变动。
针对这种场景，咱们实现了多项布局参数的配置化，用户能够依据畛域图谱的特点优化布局参数，并作为配置保留下来。
畛域图谱可视化 - 网格布局参数调整
图数据库可视化 - 布局款式参数调整
服务链路可视化 - 平铺层布局参数调整
3.2 视觉降噪
在用户应用可视化利用时，文字 / 节点 / 边等元素内容混淆在一起，如果没有做好信息的表白和出现，会间接影响到用户的应用体验和应用效率。通过剖析，咱们发现这是因为在可视化过程中产生的视觉噪声太多，而通过可视化带来的无效信息太少。上面将举例展现什么叫做视觉噪声：
在以上几张图中，尽管将常识图谱的数据出现了进去，然而元素数量十分多，信息芜杂，给用户的观感是“目迷五色”。上面咱们会介绍针对这类问题的解决方案。
文字处理
文字次要用在节点和边的形容上，尽管它能提供十分重要的信息，然而节点多了后，文字会在劫难逃的互相重叠，而重叠后的文字很难疾速辨认进去，不仅起不到传递信息的作用，反而会造成很差的视觉体验。为此，咱们须要对文字进行遮挡检测，依据文字的层叠关系，将置于底部的文字透明度调低，这样即便多层文字重叠后，置于顶层的文字仍然能被疾速辨认。
但这种解法的工夫复杂度会随着节点的增多逐步变得不可控。如果咱们有 100 个节点，最多须要 O(n!)的工夫复杂度能力计算结束。咱们这里采纳栅格划分的形式来做优化，先对画布进行栅格划分，而后确定节点所在的一个或多个栅格，在进行碰撞检测的时候，只须要和本人同栅格的节点做比照即可，因为不同栅格内的节点肯定不会呈现碰撞的状况。
这种栅格划分的实践根底就是四叉树碰撞检测，咱们在此基础上做了进一步的优化。因为须要进行遮挡检测的元素是文字类型的节点，这种节点的特点是长比严惩很多。如果依照传统的四叉树宰割算法，就会造成很多文字节点横跨多个栅格，比照的次数较多。在检测前，咱们先计算出所有文字节点的均匀长宽比，每次栅格划分是横向还是纵向，取决于哪个方向划分后栅格的长宽比更凑近文字的均匀长宽比，这样做就会缩小文字节点横跨多个栅格的状况，从而缩小了每次须要被碰撞检测的节点数量。
边解决
多边散列排布
常识图谱中存在蕴含大量出（入）边的核心节点，在对这些核心节点的边进行可视化展现时，往往会呈现边与核心节点联结处（Nexus）重叠交织在一起的状况，进而影响视觉体验。
针对这种非凡场景，咱们设计了一种多边散列排布的算法，通过边夹角偏移量计算和节点半径裁剪，将 Nexus 扩散排布在节点四周，缩小边线重叠的状况，以达到更清晰的视觉效果：
多类型可调节边
咱们还实现了多种类型的边，并反对通过参数配置的形式来调整边的款式，比方：贝塞尔曲线控制点、弧度、自旋角度等参数，以满足各种简单图谱的可视化场景。
通过多边散列排布，扭转边线类型，并调整款式参数，上面是咱们将图谱中凌乱无序的边线优化后的成果：
3.3 交互性能
适合的图谱布局能更好地表白出数据的含意，通过视觉降噪能够进一步让图谱传递出更多的无效信息。然而用户仍然须要通过交互找到本人关怀的信息，一个图谱可视化工具是否好用，交互性能会起到十分重要的作用。目前，咱们实现了上面的根本交互性能：
- 画布操作：拖动、缩放、动静延展、布局变换、多节点圈选。
- 元素 (节点和边) 操作：款式配置、悬浮高亮、元素锁定、单击、双击、右键菜单、折叠 / 开展、节点拖动、边类型更改。
- 数据操作：节点的增删改查、边的增删改查、子图摸索、数据合并、更新重载。
除了上述的根底交互性能外，咱们还摸索了一些非凡场景的交互。在图谱可视化中交互的目标，是为了从宏大的常识图谱中找到本人关怀数据的关联关系，同时也可能察看到这些关联关系在全局画布中的地位。
门路锁定
通过选取不同的节点，主动计算出节点之间的适合门路，做锁定展示，不便察看两个或多个节点是如何关联起来的。
聚焦展示
对于以后不关注的图谱区域，默认布局能够密集一些来节俭画布空间，关注某个区域后，会对以后关注的一小块区域从新布局，让节点排布扩散一些，不便查看文字的内容。
其实，无论可视化的节点与边的数量有多宏大，当深刻到业务细节中的时候，使用者关注的节点数量其实不多，重点是把使用者关怀的数据从大量数据中筛选进去，并且做好清晰地出现表白。
3.4 美团大脑可视化
美团大脑是围绕吃喝玩乐等多种场景，构建的生存娱乐畛域超大规模常识图谱，为用户和商家建设起全方位的链接。为了让美团大脑的能力更容易的被了解和应用，咱们须要通过常识图谱可视化的形式让美团大脑更具象化，并开发出便捷的常识图谱查问利用。
在开发常识谱图可视化性能之前，还须要具备一些通用可视化能力。上面次要介绍一下多屏适配和动画相干的技术能力。
多屏适配计划
美团大脑出现的终端场景非常复杂，有 PC/Mac 端屏幕、大屏电视、巨型宽屏等。各个屏幕的尺寸比例都有所不同，为了放弃对立观感，不能呈现滚动条、不能有边缘留白、不能压缩变形。同时在一些重要场合的巨型宽屏上，还要对细节做特定的适配。通过 sass 的函数和 mixin 性能能够较好地实现非等比缩放和个性化适配的需要。
- 非等比缩放：在长宽都须要思考的缩放场景中，应用基于视口百分比的单位 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 的函数，能够解决多个动画模块依赖的问题，这个计划对不同动画模块开发者的合作效率有很大的晋升，然而仍然无奈暂停和勾销动画。
async function 的计划曾经比拟好用了，然而次要问题是一旦执行就不能暂停或勾销，因而咱们基于 generator function 封装成了类 async function，能够做到随时暂停或勾销，上面是应用封装的异步动画调度器与各种工具 helper 写的动画模块业务代码。
整体计划次要有以下几个性能：
- $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 场景下有更好的成果，还须要增加一些动效。
镜头游走
咱们利用了内置的相机进行四元数的旋转计算。
粒子飞散
在飞散的时候，咱们创立随机不可见的粒子，管制粒子数量迟缓呈现，利用 requestAnimationFrame 向各自方向飞散。
产品成果与场景思考
最终在 CES 会场成果如下：
咱们在研发了次要利用在技术推广的 3D 常识图谱可视化后，还思考迁徙到工具类利用中，然而发现工具类利用目前更适宜 2D 的展现与交互，3D 尽管对于空间利用率更大，然而用户交互方式也更简单。如果后续能思考出更高效的交互方式，咱们会再次尝试利用 3D 常识图谱可视化来晋升工具类利用的产品体验。
4 落地场景
目前，常识图谱可视化技术计划曾经利用在了美团多个业务场景中，包含美团大脑、图数据库、智能 IT 运维、组件依赖剖析、商品标签治理、行业畛域图谱等。将来，咱们还将摸索更多的利用场景。
5 将来瞻望
最初，瞻望一下常识图谱可视化技术前面还能够摸索的一些方向，咱们从交互场景、成果出现以及工具能力等三个维度进行阐明。
交互场景
3D 场景中的交互：在 3D 场景中做常识图谱可视化视觉震撼水平更强，然而现阶段实用水平还不够，交互的效率也不如 2D 场景，高效的 3D 交互方式须要进一步摸索。
虚拟现实：元宇宙的概念疾速带动了 VR 等虚拟现实技术的倒退，技术成熟后或者能带来更好的可视化体验。
成果出现
大规模常识图谱可视化：在节点数量十分多的常识图谱可视化中，性能上的问题有 WebGL、WebGPU 等技术计划去解决，然而也仅限于能可视化进去，用户曾经很难找到本人须要的信息了，如何既能呈现出成千上万的节点，又能让用户便捷的找到本人须要的关系数据信息很重要。
布局的智能化：目前常识图谱的布局合理性次要靠半人工干预的形式来保障，前面能够思考针对不同的数据特色去主动匹配适合的力学布局策略，用算法智能预测出最正当的布局形式，缩小开发者或用户的干涉老本。
工具能力
通用查问工具：目前各大常识图谱数据存储引擎都有本人的可视化查问工具，互不通用，也互有优缺点，如果有对立的可视化查询语言，就可能让一种可视化工具适配多个存储引擎和利用，进步工具利用的效率。
本文作者
巍耀、诚威、宋奇、敏芳、曾亮，均为美团平台 / 搜寻与 NLP 部前端工程师。
参考资料
- https://d3js.org/
- https://github.com/vasturiano/d3-force-3d
- https://github.com/vasturiano/3d-force-graph
- https://2050.earth/
- https://en.wikipedia.org/wiki/Quadtree
- https://github.com/getify/CAF
- https://github.com/tj/co
- https://animejs.com/documentation/#staggeringBasics
- https://cubic-bezier.com/
招聘信息
美团 / 搜寻与 NLP 部 / 平台前端团队是一个翻新、凋谢、对技术有激情的前端的团队，团队次要负责搜寻平台、NLP 平台、常识图谱可视化、跨端框架、低代码工具等方向，长期诚聘实习、校招、社招，坐标北京 / 上海，欢送感兴趣的同学发送简历至：zhangweiyao@meituan.com，也欢送同行进行技术交换。
浏览美团技术团队更多技术文章合集
前端 | 算法 | 后端 | 数据 | 平安 | 运维 | iOS | Android | 测试
| 在公众号菜单栏对话框回复【2021 年货】、【2020 年货】、【2019 年货】、【2018 年货】、【2017 年货】等关键词，可查看美团技术团队历年技术文章合集。
| 本文系美团技术团队出品，著作权归属美团。欢送出于分享和交换等非商业目标转载或应用本文内容，敬请注明“内容转载自美团技术团队”。本文未经许可，不得进行商业性转载或者应用。任何商用行为，请发送邮件至 tech@meituan.com 申请受权。