作者|维药成维知识图谱可视化可以更直观地查看和分析知识图谱数据。本文主要介绍美团平台在布局策略、视觉降噪、交互功能、视觉叙事、3D地图可视化等方面的一些实践和探索。很多业务场景，包括美团大脑、图数据库、智能IT运维、组件依赖分析、行业领域图谱等，希望对从事知识图谱可视化的同学有所帮助或启发。1知识图谱可视化的基本概念1.1知识图谱技术简介知识图谱（KnowledgeGraph）是人工智能的一个重要分支。描述性地。比如“孙悟空的师父是唐僧”就是一则知识。在这条知识中，有“孙悟空”和“唐僧”两个实体，“师父”描述了这两个实体之间的关系。以上内容构成了一个SPO三元组（主语-谓语-宾语）。因此，对于现实世界中实体之间的关系，用知识图谱来描述是非常合适的。正是由于知识图谱的这一优势，这项技术得以迅速普及，目前在搜索、推荐、广告、问答等多个领域都有相应的解决方案。1.2知识图谱可视化简介可视化，简单来说就是将数据以更直观的形式呈现。其实我们现在常用的折线图、直方图、饼图（以下简称饼图）甚至Excel表格都是数据可视化的一种。过去，我们主要以数据表的形式存储数据，但这种方式很难结构化地存储知识型数据。对于关系型数据，如果我们以前面的例子为基础，加上一些相关信息，可视化后可以显示如下：西游记中人与物的关系等信息很难用“折叠”来呈现柱子蛋糕”或表格出来，用知识图谱的可视化方式呈现，非常一目了然。2场景分析与架构设计2.1场景需求分析经过梳理，我们发现美团在各个业务场景下的知识图谱可视化需求主要有以下几类：图查询应用：基于图数据库的图可视化工具，提供图数据交互编辑、子图探索、顶点/边信息查询等操作。图分析应用：可视化展示业务场景中的关系数据，帮助商科学生快速理解链路故障、组件依赖等问题。科技品牌建设：通过知识图谱普及什么是人工智能技术，它能做什么，让AI也能被解读。2.2技术选型和架构设计在图关系可视化方面，国内外有很多图可视化框架。由于美团的业务场景有很多个性化需求和交互方式，所以选择了D3.js作为基础框架。虽然上手成本较高，但灵活性也比较高，功能扩展也很方便。D3.js提供力导向图位置计算的基本算法，也有非常方便的布局干预方式。于是，基于D3.js，我们封装了自己的知识图谱可视化方案——uni-graph。整体功能和架构设计如下图所示。下面我们将介绍uni-graph的一些功能细节和可视化的一般技术策略。架构图3技术挑战与方案设计3.1布局策略在不同类型的知识图谱中，由于数据差异较大，对布局效果的要求也不同。让业务数据有一个适合可视化呈现的布局，是一个比较大的技术挑战。除了下面的基本布局，我们还探索了一些在特定场景下的布局方案。LayoutStrategy-BasicLayoutExtractionDataFeatureOptimizationLayoutD3.js提供的力导向图模块（d3-force）实现了一个速度Verlet数值积分器，用于模拟粒子的物理运动。在没有过多干预的情况下，根据节点和边的关系模拟物理粒子的随机运动。D3.js的力导向图提供的机械调节参数主要有Centering（向心力）、Collision（碰撞检测）、Links（弹簧力）、Many-Body（电荷力）、Positioning（定位力）。如何针对不同的节点进行适当的机械干预，是让布局更符合预期的关键。一般来说，相同业务场景的图结构具有一定的相似性，我们考虑针对业务特有的数据结构特点做定制化的机械调优。这里有一个简单的场景来说明。我们只在树中抽象了层级和叶节点的概念。虽然有些节点之间会形成一个环，不符合树的定义，但是大部分数据都是类似树的结构，经过调试，显示的关系会比随意布局更清晰，用户也能更快的找到自己需要的数据。布局策略——基于数据特性的优化事实上，美团的每个业务场景都有定制化布局的需求。这里只是举例说明的最简单的场景之一。uni-graph可以独立调整机械参数模块，并整理出一些常用的参数预设，可以支持很多场景的布局优化。分层数据布局方案在很多业务场景中，用户更喜欢以分层的方式观察地图数据，因为这样有利于理解和分析地图数据，例如：根据用户探索路径分层、边关系聚合分层、业务属性分类和层级、指定中心点路径层级等。这些要求对地图的样式和布局提出了更高的要求。得益于D3.js机械布局的灵活性和扩展能力，我们在业务实践过程中实现了几种常用的布局方案：布局策略-层次布局-1布局策略-层次布局-2簇层布局为例，简单介绍一下实现过程：首先对图数据进行处理，根据关联关系对与中心节点关联的子节点进行分类，生成聚类边和聚类边节点，并对子节点进行分层。还需要定制一个聚类力。聚类力包含三个参数ClusterCenter、Strength、Radius，分别对应聚类中心、力的强度和聚类半径。在力学初始化期间，我们为每个子节点定义簇中心节点和簇半径。最后在机械布局的Tick过程中，先计算子节点与其簇中心节点的坐标偏移量，然后根据偏移量与簇半径的差值判断节点的受力方向和大小，最后由向量计算出出节点的坐标。布局参数配置在特定领域的图形可视化中，通常会使用一种或两种布局来满足用户的展示需求，因为这些场景中图形的关系结构是比较固定的。但是，作为一个平台工具，需要在多个领域展示地图。为了更清晰地展示各领域地图的特点，布局形式需要随着地图的变化而变化。针对这个场景，我们实现了多个布局参数的配置。用户可以根据域图的特点优化布局参数并保存为配置。领域地图可视化-网格布局参数调整布局策略-参数配置图数据库可视化-布局样式参数调整布局策略-图数据库服务链接可视化-平铺层布局参数调整布局策略-服务链接3.2视觉降噪在用户使用可视化时应用程序、文本/节点/边缘和其他元素混合在一起。如果信息不能很好地表达和呈现，将直接影响用户体验和效率。经过分析，我们发现这是因为在可视化过程中产生了太多的视觉噪声，而通过可视化带来的有效信息太少了。下面举例说明什么叫视觉噪声：视觉降噪-visualnoise上图中，虽然呈现了知识图谱数据，但是元素数量非常多，信息杂乱，用户的感知是“眼花缭乱”。下面我们将介绍此类问题的解决方案。文字处理文本主要用于节点和边的描述。虽然它可以提供非常重要的信息，但是当节点过多时，文本之间难免会相互重叠，重叠的文本很难快速识别。如果不具备传递信息的功能，会造成视觉体验不佳。为此，我们需要对文字进行遮挡检测，根据文字的层次关系，降低放置在底部的文字的透明度，这样即使多层文字重叠后，放置在最上面的文字图层仍然可以快速识别。Visualnoisereduction-text-contrast但是这个方案的时间复杂度会随着节点数量的增加而逐渐变得不可控。如果我们有100个节点，则最多需要O(n!)时间复杂度来完成计算。这里我们使用网格划分来优化。首先将画布网格化，然后确定节点所在的一个或多个网格。进行碰撞检测时，只需要与同一网格的节点进行比较即可。也就是说，因为不同网格中的节点永远不会发生碰撞。视觉降噪-文本-网格划分的理论基础是四叉树碰撞检测，我们在此基础上做了进一步的优化。由于需要遮挡的元素是文本类型的节点，该节点的特点是长度远大于宽度。如果使用传统的四叉树分割算法，很多文本节点会跨越多个格子，比较的次数会很大。在检测之前，我们首先计算所有文本节点的平均纵横比。网格是水平划分还是垂直划分取决于网格的纵横比在哪个方向更接近文本的平均纵横比。这样做会减少文本节点跨越多个网格的情况，从而减少每次需要检测的节点数量。视觉降噪-文本-四叉树边处理多边哈希排列知识图谱中存在包含大量出（入）边的中心节点。在视觉展示这些中心节点的边缘时，经常会出现边缘与中心节点的重叠交错的Nexus，会影响视觉体验。针对这种特殊场景，我们设计了多边哈希排列算法，通过边角偏移计算和节点半径裁剪，将Nexus分散在节点周围，减少边的重叠，从而达到更加清晰的视觉效果：边处理-哈希排列多种类型的可调边我们也实现了多种类型的边，支持通过参数配置调整边的样式，如：贝塞尔曲线控制点、弧度、自旋角等参数，满足可视化场景各种复杂的地图。边处理——多类型边通过多边哈希排列，改变边类型，调整样式参数。以下是优化地图中杂乱无序边缘的效果：边缘处理-最终对比3.3交互功能适合地图布局可以更好的表达数据的含义，通过视觉降噪，地图可以进一步传达更有效的信息信息。但是，用户仍然需要通过交互找到自己关心的信息。无论一款地图可视化工具好用与否，交互功能都会起到非常重要的作用。目前，我们已经实现了以下基本交互功能：Canvas操作：拖动、缩放、动态扩展、布局变换、多节点圈选。元素（节点和边）操作：样式配置、悬停高亮、元素锁定、单击、双击、上下文菜单、折叠/展开、节点拖动、边类型改变。数据操作：添加、删除、修改和检查节点，添加、删除、修改和检查边，探索子图，合并数据和重新加载更新。除了上述基本的交互功能，我们还探索了一些特殊场景的交互。地图可视化交互的目的是从庞大的知识图谱中找到你关心的数据之间的关系，同时观察这些关系在全局画布中的位置。路径锁定通过选择不同的节点，自动计算出节点间合适的路径，并进行锁定显示，便于观察两个或多个节点之间的关系。交互功能——路径锁定焦点显示对于当前不关注的地图区域，默认布局可以更密集一些，以节省画布空间。关注某个区域后，会重新布局当前关注的一小块区域，这样节点布局就分散了。方便查看文字内容。交互功能-聚焦展示事实上，无论可视化的节点和边的数量有多大，深入业务细节时，用户关心的节点数量其实并不多。重点是从大量的数据中提取用户关心的数据，过滤掉，并做好清晰的表达。3.4美团大脑可视化美团大脑-主界面美团大脑是围绕吃喝玩乐等多种场景构建的生活娱乐领域的超大规模知识图谱，为用户和商家建立全面链接.为了让美团大脑的能力更容易理解和使用，我们需要通过知识图谱可视化，让美团大脑更加形象化，开发一个便捷的知识图谱查询应用。在开发知识图谱可视化功能之前，还需要一些通用的可视化能力。下面主要介绍多屏适配和动画相关的技术能力。多屏适配方案美团大脑呈现的终端场景非常复杂，包括PC/Mac终端屏幕、大屏电视、巨型宽屏等。每个屏幕的尺寸比例不同。为了保持统一的观感，没有滚动条，没有边距，也没有压缩变形。同时，在一些重要场合的巨幅宽银幕上，需要对细节进行具体的适配。Sass函数和mixin函数可以更好的满足非比例缩放和个性化适配的需求。code-sass非比例缩放：在需要同时考虑长度和宽度的缩放场景下，根据视口的百分比使用单位vh和vw比较合适。设计稿尺寸为1920*1080，通过转换函数可以自动计算出对应的vh，vw值。其中，为了保证字体大小在不同尺寸的屏幕上更符合预期，设计稿中的高度将作为rem引导参数的基本单位。个性化适配：超宽大屏尺寸下，自动按比例缩放，部分元素视觉效果不是特别完美。上面的mixin可以很容易地在CSS中针对特定尺寸的屏幕进行定制。匹配。像素级还原：在校准不同尺寸的设计稿时，部分元素会出现阴影效果或不规则图形，但设计师只能根据矩形裁剪图片，导致Sketch自动标注的数据不准确。这时候可以把浏览器的尺寸设置成和设计稿一致，然后再盖上一层半透明的设计稿图片，把元素一个一个对齐，这样就可以快速还原屏幕设计稿了像素级别的不同尺寸。这套大屏适配技术方案支持美团大脑历次版本迭代。之前参加亚洲美食节时，由于场馆搭建复杂，屏幕分辨率发生了多次变化，只用了0.5个人日就完成了各种分辨率的定制、开发和适配。美团大脑-多屏适配直播效果美团大脑-多屏适配-直播动画脚本自动化与静态可视化界面相比，动态可视化或交互式可视化具有更好的视觉效果，可以传递给观众更多的信息。静态效果vs动态效果另外，美团大脑在展示过程中有一部分时间是无人值守的，加上动态可视化，还需要自动播放循环动画，所以需要动画脚本自动化：在运行过程中，它根据配置的动画脚本循环执行。当用户与应用程序交互时，动画可以自动停止。有一些方便的方法可以重新运行动画或进行任意场景跳跃。美团大脑的动画效果具有以下特点：动画类型多样化，包括3D类型、DOM动画、SVG动画、第三方Canvas组件、Vue组件切换。多个动画模块之间存在内聚依赖关系，动画执行可以暂停和开始。不同模块的动画需要相互通信。我们将每个动画封装成一个函数，最初使用setTimeout和async函数解决方案：setTimeout：可以管理简单的动画执行，但是只要前面的动画有一个时间变化，后面所有动画setTimeout的延迟参数都需要改变，很麻烦.asyncfunction：将动画封装成一个返回Promise的函数，可以解决多个动画模块依赖的问题。该方案大大提高了不同动画模块开发者的协作效率，但仍然无法暂停或取消动画。code-jsasyncasyncfunction的解决方案比较好用，但是主要的问题是一旦执行，就不能暂停或者取消了。因此，我们将其封装成一个基于generator函数的async函数，可以随时暂停或取消。以下是使用封装的异步动画调度器和各种工具助手编写的动画模块业务代码。code-vue实践整体程序主要有以下几个功能：$ae是基于generator函数封装的异步工具库async-eraser，CancelToken是停止generator运行的取消令牌。定制开发支持异步事件的EventEmitter。emit函数将返回一个Promise。解析的时候就会知道emit的动画已经执行了，这样可以更方便的在Vue中跨组件调度动画。Vue组件卸载时会自动关闭监听事件，也可以自动停止当前组件中的动画调度器。监听DOM的transitionend和animationend事件，自动获取CSS动画执行结束的时机。通过以上方案，我们让开发动画模块的同学像写异步函数一样编写动画模块，大大提高了动画模块的开发效率，让每个同学都可以专注于动画细节的调试。以下为最终实现效果：美团大脑-整体效果美团大脑功能交互美团大脑-功能交互因为美团大脑不仅参与各种活动和展会，还服务于同事的日常工作，帮助大家便捷查询POI知识Atlas数据，最终效果如上图所示。主要有以下功能和交互：POI信息查询：星级、评论数、均价、地址、子项评分、推荐理由。知识图谱可视化：集群布局、循环布局、节点寻路算法、画布缩放拖动、节点锁定操作、焦点呈现。辅助信息：推荐菜品、菜品标签、门店标签词云、情感曲线、细粒度情感分析、相似餐厅。3.5视觉叙事探索美团大脑是我们团队的第一个知识图谱可视化项目。通过本项目的实践，我们积累了一些知识图谱可视化的基本可视化能力和优化策略，大大提高了开发效率。与此同时，团队开始考虑在交互和呈现上进一步突破。我们也收集了一些反馈，发现很多人对知识图谱技术是什么，它能做什么，还没有一个清晰的认识。经过团队头脑风暴，我们认为核心原因是AI技术复杂，难以形象化，需要还原真实场景。碰巧知识图谱比其他技术更具可解释性，因此我们决定开发视觉叙事。VisualDataStoryTelling就是通过隐喻的方式将数据可视化，以可视化为手段向受众讲述数据背后的故事。我们举个例子来对比一下纯文本和视觉叙事的区别：在视觉叙事中可以看到，视觉叙事的形式比文字更直观，可以让观众更清楚地了解数据背后的故事，并且还可以通过动态效果呈现关键信息，引导用户按顺序理解故事内容。下面我们将介绍几种在视觉叙事中开发运动效果的想法。扫掠效果扫掠效果对于提高视觉感受和强调视觉焦点非常有效。我们需要设计师为扫掠效果的轮廓元素提供两个文件，一个是轮廓的背景图片，一个是带有轮廓路径svg的轮廓。经过技术研究，我们发现可以通过svg渐变或者mask来实现。SVGGradientSweep-GradientSVGMaskSweep-Mask渐变方案用在弯曲角度较小的轮廓元素上或者地图的边缘没有问题，但是渐变只能从一侧到另一侧是线性的。如果应用到渐变效果将在具有较尖锐弯曲的边缘上不连续。sweeping-gradient-advantages综合分析两种方案，mask方案更灵活，梯度表现更好。由于我们的场景可以避免过度弯曲的边缘，因此我们选择了性能更好的渐变方案。动态节奏调试一个动态效果是否有节奏对观看者的体验影响很大，但是节奏感是一个很难掌握的东西。这里推荐两个辅助工具：animejs和贝塞尔曲线调整。这两款工具能给你带来很多灵感，同时让设计者可以使用工具调试或找到想要的动画效果，降低动画开发的协作成本。下面是一个使用Bessel函数实现的动画效果：BesselSearle视觉叙事效果我们为知识图谱的视觉叙事设计了几个典型的场景，再现了日常生活中的需求，比如找店、生意分析等，直观展示了知识图谱如何服务于真实场景的需求。出来了，下面是视觉叙事的效果：视觉叙事——整体效果3.63D可视化场景探索以上就是知识图谱可视化在2D场景下的开发心得。为了达到更好的视觉效果，我们还探索了3D场景技术方案。我们选择vasturiano的3d-force-graph的原因如下：知识图谱布局库为d3-force-3d，基于d3-force开发，延续了团队前期在D3.js方向的积累。比较熟悉。它基于three.js渲染3D物体，在渲染层屏蔽了很多细节，暴露了three.js原有的物体，方便3D场景的二次开发。在产品和设计层面，由于我们团队在3D可视化方面的经验比较少，所以研究考察了很多优秀的作品。这里我们主要从Earth2050项目中得到一些启发。下面介绍我们在二次开发过程中的主要优化点。节点样式优化3d-force-graph中默认的节点是基本的SphereGeometry3D对象，视觉外观一般，需要更多的glossy节点，可以通过以下方案实现。使用着色器实现透明发光遮罩材质。使用类似高尔夫的纹理为节点提供更多纹理。虽然操作比较简单，但将关键节点“点亮”后，整体视觉观感会好很多。3D-NodeTexture3D动画效果为了在3D场景中有更好的效果，需要添加一些动画效果。Camerawalk我们使用内置相机进行四元数旋转计算。3D-camerawalkparticlescattering飞行时，我们创建随机的不可见粒子，控制粒子数量缓慢出现，使用requestAnimationFrame向各自方向飞行。3D-ParticleScatteringProductEffectsandSceneThinkingCES会场最终结果如下：在3D-CES现场，我们在开发了主要用于技术推广的3D知识图谱可视化之后，也考虑迁移到工具应用，但发现工具应用目前更适合2D展示和交互。3D虽然空间利用率更高，但用户交互方式也更复杂。如果未来能想到更高效的交互方式，我们会尝试用3D知识图谱可视化再次提升工具类应用的产品体验。4落地场景目前，知识图谱可视化技术方案已经应用于美团的多个业务场景，包括美团大脑、图数据库、智能IT运维、组件依赖分析、商品标签管理、行业领域图谱等。未来，我们将探索更多的应用场景。落地场景-1落地场景-2落地场景-35未来展望最后??，让我们一起期待知识图谱可视化技术背后的一些可以探索的方向。我们将从三个维度进行讲解：交互场景、效果呈现、工具能力。InteractivesceneInteractionin3Dscenes：3D场景下的知识图谱可视化更具视觉冲击力，但现阶段实用性还不够，交互效率不如2D场景。需要进一步探索高效的3D交互方法。虚拟现实：元界的概念迅速带动了VR等虚拟现实技术的发展，技术成熟后可能会带来更好的视觉体验。效果呈现大规模知识图谱可视化：在节点数量多的知识图谱可视化中，WebGL、WebGPU等技术方案可以解决性能问题，但仅限于可视化，用户很难发现他们需要的信息。现在，如何呈现数以万计的节点，让用户轻松找到自己需要的关系数据信息，就显得非常重要了。智能布局：目前知识图谱布局的合理性主要靠半人工干预来保证。后期可以考虑针对不同的数据特??征自动匹配合适的机械布局策略，通过算法智能预测最合理的布局。降低开发人员或用户干预成本。工具能力通用查询工具：目前各大知识图谱数据存储引擎都有自己的可视化查询工具，各有千秋，各有优缺点。如果有统一的可视化查询语言，一个可视化工具可以适配多种存储引擎和应用，提高工具应用的效率。
