美团：2022年美团技术年货——前端系列（198页）.pdf

1、前端1知识图谱可视化技术在美团的实践与探索1终端新玩法：技术栈无关的剧本式引导33自动化测试在美团外卖的实践与落地57深入理解函数式编程（上）86深入理解函数式编程（下）115Android 对 so 体积优化的探索与实践142从 0 到 1：美团端侧 CDN 容灾解决方案163美团高性能终端实时日志系统建设实践182目录知识图谱可视化技术在美团的实践与探索作者：巍耀1.知识图谱可视化基本概念1.1知识图谱技术的简介知识图谱（KnowledgeGraph）是人工智能的重要分支，它是一种揭示实体之间关系的语义网络，可以对现实世界的事物及其相互关系进行形式化地描述。举个例子，“孙悟空的师傅是唐僧”

2、就是一条知识。在这条知识里，有“孙悟空”和“唐僧”两个实体，“师傅”是描述这两个实体之间的关系，上述内容在知识图谱中就组成了一个 SPO 三元组（Subject-Predicate-Object）。所以，对于现实世界中实体之间的关联关系，用知识图谱进行描述的话，就显得非常合适。正是由于知识图谱的这种优势，这项技术得到迅速普及，目前在搜索、推荐、广告、问答等多个领域都有相应的解决方案。1.2知识图谱可视化的简介可视化，简单来说就是将数据以一种更直观的形式表现出来。其实，我们现在常用的折线图、柱状图、饼状图（下称折柱饼），甚至 Excel 表格，都属于数据可视化的一种。以往，我们存储数据主要是以数

3、据表的方式，但这种方式很难结构化地存储好知识类型的数据。对于关系类型的数据，如果用前文的例子为基础并补充一些相关信息，经过可视化后就能展示成这样：前端22022年美团技术年货西游记中人、物关系这种信息就很难用“折柱饼”或者表格呈现出来，而用知识图谱可视化的方式呈现，就非常的清晰。2.场景分析与架构设计2.1场景需求分析我们梳理后发现，在美团的各个业务场景中知识图谱可视化需求主要包含以下几类：图查询应用：以图数据库为主的图谱可视化工具，提供图数据的编辑、子图探索、顶点/边信息查询等交互操作。图分析应用：对业务场景中的关系类数据进行可视化展示，帮助业务同学快速了解链路故障、组件依赖等问题。技术品牌

4、建设：通过知识图谱向大家普及人工智能技术是什么，以及它能做什么，让 AI 也具备可解释性。2.2技术选型与架构设计在图关系可视化上，国内外有很多图可视化的框架，由于美团的业务场景中有很多个性化的需求和交互方式，所以选择了 D3.js 作为基础框架，虽然它的上手成本更高一些，但是灵活度也比较高，且功能拓展非常方便。D3.js 提供了力导向图位置计算的基础算法，同时也有很方便的布局干预手段。于是，我们基于 D3.js 封装了自己的知前端2022年美团技术年货布局策略-基础布局提取数据特征优化布局D3.js 提供的力导向图模块（d3-force）实现了一个 velocityVerlet 数值积分器，

5、用于模拟粒子的物理运动。在不做过多干预的情况下，会根据节点与边的关系模拟物理粒子的随机运动。D3.js 的力导向图提供的力学调参项主要包括 Centering（向心力）、Collision（碰撞检测）、Links（弹簧力）、Many-Body（电荷力）、Positioning（定位力）。如何针对不同的节点进行合适的力学干预，是让布局更符合预期的关键。一般来讲，同一业务场景的图谱结构都具有一定的相似性，我们考虑针对业务特定的数据结构特征来做定制化的力学调优。这里举一个简单的场景进行说明，我们抽象出了在树中才有的层级和叶子节点的概念，虽然部分节点会互相成环，不满足树的定义，但是大部分数据是类似于树

6、的结构，这样调试后，展示的关联关系就会比随机布局更加清晰，用户在寻找自己需要的数据时也会更快。前端2022年美团技术年货布局策略-层级布局-1布局策略-层级布局-2以聚簇层布局为例，我们简单介绍一下实现过程：首先处理图谱数据，将中心节点关联的子节点按关联关系归类，生成聚簇边和聚簇边节点，同时将子节点分层。还需要自定义一种聚簇力，聚簇力包含三个参数ClusterCenter、Strength、Radius，对应聚簇中心、力的强度、聚簇半径。在前端2022年美团技术年货图数据库可视化-布局样式参数调整布局策略-图数据库服务链路可视化-平铺层布局参数调整布局策略-服务链路3.2视觉降噪在用户使用可视