其他
知识图谱可视化技术在美团的实践与探索
总第501篇
2022年 第018篇
1 知识图谱可视化基本概念
1.1 知识图谱技术的简介
1.2 知识图谱可视化的简介
2 场景分析与架构设计
2.1 场景需求分析
2.2 技术选型与架构设计
3 技术挑战与方案设计
3.1 布局策略
3.2 视觉降噪
3.3 交互功能
3.4 美团大脑可视化
3.5 可视化叙事的探索
3.6 3D可视化场景的探索
4 落地场景
5 未来展望
交互场景
效果呈现
工具能力
1 知识图谱可视化基本概念
1.1 知识图谱技术的简介
1.2 知识图谱可视化的简介
2 场景分析与架构设计
2.1 场景需求分析
图查询应用:以图数据库为主的图谱可视化工具,提供图数据的编辑、子图探索、顶点/边信息查询等交互操作。 图分析应用:对业务场景中的关系类数据进行可视化展示,帮助业务同学快速了解链路故障、组件依赖等问题。 技术品牌建设:通过知识图谱向大家普及人工智能技术是什么,以及它能做什么,让AI也具备可解释性。
2.2 技术选型与架构设计
3 技术挑战与方案设计
3.1 布局策略
提取数据特征优化布局
层级数据布局方案
首先处理图谱数据,将中心节点关联的子节点按关联关系归类,生成聚簇边和聚簇边节点,同时将子节点分层。还需要自定义一种聚簇力,聚簇力包含三个参数ClusterCenter、Strength、Radius,对应聚簇中心、力的强度、聚簇半径。在力学初始化时,我们为每个子节点定义聚簇中心节点和聚簇半径。最后在力学布局的Tick过程中,先计算子节点与其聚簇中心节点坐标偏移量,然后根据偏移量和聚簇半径的差值来判断节点的受力方向和大小,最终经过向量计算得出节点的坐标。
布局参数配置化
3.2 视觉降噪
文字处理
边处理
3.3 交互功能
画布操作:拖动、缩放、动态延展、布局变换、多节点圈选。 元素(节点和边)操作:样式配置、悬浮高亮、元素锁定、单击、双击、右键菜单、折叠/展开、节点拖动、边类型更改。 数据操作:节点的增删改查、边的增删改查、子图探索、数据合并、更新重载。
路径锁定
聚焦展现
3.4 美团大脑可视化
多屏适配方案
非等比缩放:在长宽都需要考虑的缩放场景中,使用基于视口百分比的单位vh、vw很合适,设计稿尺寸为1920 * 1080,可以通过转换函数自动计算出对应的vh、vw值。其中为了保证字体大小在不同尺寸的屏幕上更符合预期,会用设计稿里的高为基础单位做rem的指导参数。 个性化适配:在超宽的大屏尺寸下,按照比例自动缩放,在某些元素上视觉效果并不是特别完美,上面的mixin可以很方便地在CSS中对特定尺寸的屏幕做个性化适配。 像素级还原:针对不同尺寸的设计稿校准时,有些元素会带有阴影效果或者是不规则图形,但是设计师只能按照矩形切图,导致Sketch自动标注的数据不准确。这时可以把浏览器的尺寸设置成与设计稿一致,再蒙上一层半透明的设计稿图片,逐个元素做对齐,就可以快速对不同尺寸屏幕的设计稿做像素级还原。
动画脚本自动化
在无人操作时,按照配置好的动画脚本循环执行。 用户与应用交互时,能够自动将动画停止。 有便捷的方式重新运行动画或进行任意场景的转跳。
动画类型多样化,包含3D类型、DOM Animation、SVG Animation、第三方Canvas组件、Vue组件切换。 多个动画模块之间有衔接依赖,动画执行可以暂停和开始。 不同模块的动画之间需要相互通信。
$ae是基于generator function封装的异步工具库async-eraser,CancelToken是停止生成器运行的取消令牌。 定制开发了支持异步事件的EventEmitter,emit函数会返回一个Promise,resolve时就会得知emit的动画已经执行完毕,使Vue跨组件的动画调度更容易。 Vue组件卸载时会自动off监听的事件,同时也能自动停止当前组件内的动画调度器。 监听DOM的transitionend和animationend事件,自动获取CSS动画执行结束的时机。
美团大脑功能交互
POI信息查询:星级、评论数、均价、地址、分项评分、推荐理由。 知识图谱可视化:成簇布局、环路布局、节点寻路算法、画布的缩放与拖拽、节点锁定操作、聚焦呈现。 辅助信息:推荐菜、菜品标签、店铺标签词云、情感曲线、细粒度情感分析、相似餐厅。
3.5 可视化叙事的探索
扫光效果
动效节奏调试
3.6 3D可视化场景的探索
知识图谱布局库为d3-force-3d,是基于d3-force开发的,延续了团队之前在D3.js方向的积累,使用起来也会更熟悉。 它是基于three.js做3D对象的渲染,并在渲染层屏蔽了大量的细节,又暴露出了three.js的原始对象,便于对3D场景的二次开发。
节点样式优化
用shader实现一个透明发光遮罩的材质。 用类似高尔夫的纹理让节点更有质感。
3D动效
4 落地场景
5 未来展望
交互场景
效果呈现
工具能力
参考资料
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/
本文作者
阅读更多