个推资深前端开发专家 东风
图可视化应用是数据可视化的一个重要组成部分。图指的是知识图谱（Knowledge Graph），此概念于2012年由Google正式提出，旨在帮助Google优化搜索引擎返回的结果，提升用户搜索质量及体验。
个推作为专业的数据智能服务商，在图可视化应用方面也进行了丰富的实践。本文将从四部分讲述图可视化应用：应用场景、组成部分、个推图可视化组件、个推图可视化展望。
（文末附视频版讲解及完整资料下载）
01
图可视化应用场景
图可视化的应用场景非常广泛，在知识推理、数据校验、路径探索、生物可视化等场景都有所应用。
上图是一个图可视化应用的综合案例场景，展现了一组虚拟的组织结构关系，可以进行数据校验、关系推理。图中，我们可以根据不同的场景需求，对人员、阵营、活动这三种不同的分类进行过滤，也可以根据实体的属性如性别、年龄层次、兴趣偏好等，筛选出自己想要的结果，如组织中的人员年龄结构、男女分布比例等。
此外，我们还可以自主地对图的样式进行编辑，以及在工具栏对图进行一些常规操作，如布局、放大、缩小等。
02
图可视化组成部分
图可视化由四部分组成：数据、渲染、布局、交互。
1、数据
在关系图谱中，数据主要指的是关系型数据。我们将数据应用于图谱前，需要先进行数据收集、清洗，避免无用的数据干扰可视化的解读。
2、渲染
关系图的渲染包括Svg、Canvas、webgl等渲染方式。
Svg渲染的优势在于易操作、结构清晰，但处理大数据量时其浏览器开销大，故不太适合数据量大的场景。
相比Svg, Canvas则更适合数据量大的场景下的渲染，但不足之处在于其结构层次比较复杂，对于交互事件的处理也比较繁琐。
Webgl主要用于绘制3D的关系图。
3、布局
不同的场景需要不同的布局。力导布局，是通过模拟物理引擎中的库伦斥力和胡克弹力，来计算布局的一种方式，适用于描述现实世界中的关系远近。树图布局，则比较适合描述组织架构。有向图布局，适合用于绘制流程图。
4、交互
常见的交互方式有选择、重配、编码、过滤、对比等等。可视化中的交互，可以缓解有限的可视化空间与数据量过载之间的矛盾。例如，对于高维数据，我们可以通过分组交互，对高维数据进行降维。此外，从交互任务的角度，用户还可以对图里的每一个单项数据进行更多的操作，比如查看详情、数据展开等。
03
个推图可视化组件
个推在实践过程中积累了一系列比较常用的组件，方便我们实现上述的案例。对于图可视化而言，渲染是最重要的一步，首先需要选择合适的数据可视化引擎。然而，市面上不同的引擎其渲染的实现方式不同。哪种引擎才是最佳选择呢？
我们将对这些引擎进行简要介绍，从性能、使用方式等方面进行对比分析。
（1）AntV-G6:
AntV-G6是来自蚂蚁金服的数据可视化解决方案。蚂蚁金服这几年在数据可视化的投入非常大，有g2、g6、 L7等可视化库，使用方便，但是布局设置不太友好，g6的文档也不够完善。
（2）Echarts：
Echarts是来自百度的图表库。所有的图表都是配置化生成，非常方便，不足在于其扩展性较弱。
（3）D3js：
D3js是一套相对底层的图表库，内含座标轴、图形、算法等基础的元件，可以组合成任何你想要的图表格式。D3js是基于svg去操作的，虽然后面也新增了canvas的渲染，但是从性能表现来看，尤其是数据量大的时候，svg不是很好的选择。
（4）vis.js-network:
其优点在于高度封装，使用方便。其力导布局以参数的形式驱动，但存在一个问题：当点的数量超过100个的时候，会被认定开销过高，力导布局默认会被关闭。
（5）Cytoscape.js:
它是针对关系图的一套解决方案，包含图的渲染、图的常用算法等。个推从聚合/筛选、布局、性能以及Github的关注度几个角度对比了visjs、Cytoscape.js、以及Antv-g6三个可视化库，最终选择了功能完备、扩展性更好的Cytoscape.js作为个推组件的核心渲染。
△ 图渲染引擎的对比
△使用方式对比
在Cytoscape.js 中，数据可以通过api添加到图里，或者在创建图实例的时候自行生成。Cytoscape.js中的样式则是以style的形式，或者添加class的形式予以生成。它的样式尽可能遵循CSS规定。但是，CSS中的属性不足以实现图形某些部分的样式，在这种情况下，Cytoscape.js将引入特有的其他属性。
值得注意的是，这几年Antv-g6的迭代速度非常快，其实现思路比Cytoscape.js更加模块化。后续，个推也将持续跟进g6的发展。
个推基于Cytoscape.js的vue组件
个推在实践过程中，开发了一个基于Cytoscape.js的vue组件，由Legend图例、Category、Cytoscape、布局四大模块构成。
（1）Legend图例：
类似echarts的图例，具有开关、分页、位置、方向、点击、双击等功能，便于进行图谱操作。
（2）Category：
对配置数据进行分类。支持用户对数据维度进行划分支持字段配置、颜色图片配置以及其他具体的配置。
（3）Cytoscape：
剥离配置和数据，以数据驱动图谱展示。
兼容Cytoscape.js的原生配置，包括布局、点、线的样式等，具体可参照Cytoscape.js官方文档。
（4）布局：
基于cytoscape.js插件机制的d3-force布局，支持力导布局，并能实时返回布局进度。
个推实践过程中的常见问题及应对方案
（1）应对大量数据渲染：
就渲染层面而言，由于自定义样式的背景图片的大小、透明度、事件的监听等都是开销，故我们不再考虑svg。
从布局层面来说，可考虑方案有：前置布局，不在渲染的时候进行实时计算，后端预渲染也不进行，又或者可以有一个用户反馈的进度条。
但更好的方案是直接避开大量数据的渲染。我们其实并不需要让整个屏幕都充斥着密密麻麻的点。我们可以把数据进行聚类，按需去展开、收起数据集以及路径。
（2）Vue实例中保存cytoscape实例导致页面crash：
该问题是Vue的watch机制导致的，因为Vue会默认监听实例里面的变量，而cytoscape实例本身又包含了当前的dom实例，存在循环引用。根据vue官方文档，我们只需要在变量前面加$或者_绕开watch机制即可。
（3）节点多个label渲染：
此项为Cytoscape.js的短板。其label是以style的形式渲染，所以在其使用过程中并不能多个label并存，需要通过插件去渲染canvas。在g6中，用户可以在registerNode上自行定义每一个点、线的展现形式，从而有效规避该问题。
（4）Can not create edge ** with nonexistant target：
Cytoscape.js认为在用户数据清洗的时候，应该清洗掉冗余的脏数据。当出现该项报错信息（Can not create edge ** with nonexistant target）时，Cytoscape.js会停止渲染功能，导致图无法生成。为防止此项报错的发生，在使用渲染功能前，我们会先自动清洗一遍脏数据。
04
个推图可视化展望
当我们实践的越多，会发现可以做的更多。
1、聚类优化
比如在数据分析方面，我们可以进行聚类优化。前文提及当数据量大的时候，我们可以采用聚类的方法，然后分层次的展开。聚类有很多算法，比如基于划分的k-mean算法。它的实现方式为：先随机定义分类，基于每个类的中心点，k-mean通过计算每个点到中心的距离再次重新分类，多次迭代后便完成聚类。除了基于划分的算法，还有基于层次聚类，以及基于密度的聚类算法。
2、图可视化配置
比如在系统方面，我们可以进行图可视化配置，从而自定义想要的实体的颜色形状，以及图标、关系的线条样式等。
3、图可视化平台
在平台建设方面，我们还可以研发一套完备的图可视化系统。上图是neo4j的一个截图，它在图可视化方面的实践已经比较深入。我们可以以neo4j为参考，结合自身图数据的能力，从数据录入开始，到数据清洗，结构整合，再到分析、研判、展现，形成一整套图可视化系统。
图可视化是数据可视化的子领域，它通过展示元素、关系，帮助用户实现数据的洞悉能力。依托自身海量数据的积累以及数据智能技术的沉淀，个推图可视化已在数据校验、知识推理等场景积累了丰富的实践，为这些场景提供了强大的数据支撑。未来，个推将持续打磨自身技术，在图可视化领域不断探索，不断拓宽图可视化的应用场景，并与开发者一起分享最新实践。
完整版分享材料获取
关注【个推技术学院】微信公众号
（微信号：getuitech）
回复关键词“图”
即可领取图可视化应用完整版分享材料！
此外，通过视频链接还可观看本文配套解析：
http://live.vhall.com/728249458