个推资深前端开发专家东风
图可视化应用是数据可视化的一个重要组成部分。图指的是知识图谱（KnowledgeGraph），此概念于年由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:
其优点在于高度封装，使用方便。其力导布局以参数的形式驱动，但存在一个问题：当点的数量超过个的时候，会被认定开销过高，力导布局默认会被关闭。
（5）Cytoscape.js:
它是针对关系图的一套解决方案，包含图的渲染、图的常用算法等。个推从聚合/筛选、布局、性能以及Github的