蚂蚁金服数据可视化解决方案 AntV 3.0 全新发布

来源：开源最前线 猿妹 整编

资料来源：蚂蚁金服科技



AntV是蚂蚁金服全新一代数据可视化解决方案，主要包含「数据驱动的高交互可视化图形语法」G2、专注解决流程与关系分析的图表库 G6、适于对性能、体积、扩展性要求严苛场景下使用的移动端图表库 F2以及一套完整的图表使用指引和可视化设计规范，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。

最近，蚂蚁金服带来了 AntV 3.0（地址：https://github.com/antvis/g2）。我们不妨看看有什么值得关注的变化。

G2 3.0 的变化

G2 是 AntV 最重要的组成，是图形语法在前端工程上的一个实现。G2 提供了强大的语义化图表生成能力，使得用户（开发者）可以通过简单的语法组合即可搭建出各种各样的图表。2017
年 11 月 22 号，G2 正式开源！ 

下面来看看，3.0 具体带来了哪些新特性？

高速渲染，即时交互响应

3.0 通过合并 Canvas 图层、数据处理外置等措施，大幅度提升了图表的渲染性能。个别图表渲染/重绘效率甚至得到了数倍的提升，为流畅的交互提供了更强有力的保障，即便在大数据量的图上，也能获得流畅的交互体验。



热力图（heatmap）有渲染和重绘两个阶段。2.x 版本重绘需要重新创建 chart instance，所以渲染和重绘时间消耗一致；而新版支持不销毁实例重绘，所以3.0版本除了让渲染耗时降低到只需原来时间的25%之外，还让重绘实现了质的飞跃，只需原重绘时间的3%即可刷新，使得热力图连续图例过滤成为现实。



▲热力图连续图例过滤



▲即时交互响应

动画模块也从底层做了深入的优化，支持自定义动画，也更加流畅。





▲自定义动画

事件完备，无限交互可能

在 3.0 版本中，图表上的任意元素均可捕获鼠标和触摸事件，提供了更精准的事件监听，同时也为丰富多样的交互提供无限可能，自此用户不仅可以通过灵活多变的图形语法组合去创造图表，而且还可以为图表增添各种交互能力。

用户只需要在 chart 或者 view 上监听该元素对应的事件名即可（元素名+基础事件名的方式组合）



▲任意元素自定义交互

更完备的定制化能力

3.0 里，图例（legend）、提示信息（tooltip）、辅助元素（guide）等配置重新进行了设计，新的配置项方案更加丰富、合理，同时还增强了对 HTML 的支持，而在Geometry层的style、label、tooltip等方法的属性上支持回调函数控制。这些的改进，使得自定义组件变得更加简单而灵活，进一步让
G2 拥有高定制化的能力。



▲自定义图例以及 tooltip

更强的分面功能

分面功能不再统一由一个 chart 实例定义，而是通过回调函数函数的形式，每个分面上的图表单独用一个 view 来绘制。这使得我们可以轻松根据需求在不同的分面图表上绘制不同的内容。经过这样的改进，绘制类似下面专业的分面图表就变成了小菜一碟：



▲分面定制效果

数据处理外置，轻装上阵

要说 3.0 变化最大的点，无疑是数据处理外置。旧版本中，Frame 和 Stat 是和 G2 强耦合的，统计处理甚至会入侵到图形语法中。

G 3.0 把G2 的数据处理部分抽离出来，封装成了一个专门的数据处理模块 DataSet。从此
G2 内部不再有数据处理、布局和统计方面的代码包袱，继续专注强化“高交互图形语法”方面的特长；而独立的 DataSet 模块则通过简单、强包容性的架构，以及状态量等策略扫除了升级扩展的障碍，得以从开源社区大量借力，不断丰富“数据驱动”这一特性的内涵。

G2 3.0不强依赖DataSet，在不需要复杂数据处理时可以不引入。

独立出来的 DataSet 主要提供三个方面的能力：

● 数据连接（connector）：用于接入不同类型的数据，支持不限于CSV/GeoJSON/Hierarchy等；

● 数据处理（transform）：进行数据变形、数据转换等，是 DataSet 的核心功能，负责和扩展了 G2 在统计、布局、数据补全等等方面的数据处理需求；

● 状态量管理（state）：支持不同数据视图之间、数据视图和图表之间的通信；
抽象出这三个方面的特性后，DataSet 模块就得以简单而广泛地从社区接力。譬如采用 d3-dsv 接入 CSV 类型的数据只需要下面寥寥两行代码：

引入社区上各种布局算法、统计函数也类似，非常简单就可以完成，马上就能扩展 G2 的绘图能力。譬如通过引入 d3-hierarchy 和 d3-voronoi 就可以轻松画出比老版本更成熟的 Treemap 和 Voronoi 图：



▲Treemap



▲Voronoi diagram

事实上，结合 DataSet 和 G2 的图形语法能力，我们能画的图可能比d3还要多一些，比如Voronoi 在极坐标上的变体，直方图、六边形分箱的 offset 支持，矩形分箱的实现等等。



▲Voronoi 在极坐标上的变体



▲直方图、六边形分箱的 offset 支持



▲矩形分箱

G6 1.2 更丰满、更稳健

支撑了内部足够多的场景后，G6 本身的架构越来越清晰和完善。1.2.0 中，一方面，我们将布局机制抽象到了 Graph 层次，有了完备、统一的布局机制，这使得大家更容易的拓展 G6 的布局。另一方面，我们将常见的功能需求和社区内优秀的算法进行总结、封装，沉淀出一部分实用的插件以供大家使用，以求最大限度的降低大家的使用成本。

统一分层布局

得益于 graphviz 的研究成果以及 cpettitt 的工程实现，经过简单的封装产出的统一分层布局插件。有了该插件以后大家把手头毫无顺序的网状数据丢进 G6 ，就能绘制出符合人基本美学和阅读习惯的分层关系图。该插件着重展示关系数据的流向，非常适用于流程类关系数据。



▲plugin.layout.dagre – 统一分层布局

Minimap，缩量图

关系的规模只要稍微大点，要做到 overview -> zoom && filter 怎么能少了
minimap 的存在！



▲plugin.tool.minimap – 缩量图

分析模板

G6 官方自研的、用于解决带权简单图的分析模版。适用于页面流量分析、系统调用分析、大中规模知识图谱等等业务场景。



基于 d3 的扩展

基于 d3 技术栈开发的两个在可视分析中非常有用的插件。



F2 1.0 更轻、更快、为移动端打造

F2（原g2-mobile) 是一套高性能、高扩展的移动端图表库，主要用于对性能、大小、扩展性高度敏感的场景，已经在钱包、淘票票、钉钉、weex、rax 中广泛使用。特性如下：

● 极小：在提供了几十种图表的基础上，压缩后代码不足 70k，全部大小 100k

● 高性能：极致优化贴近原生canvas的性能

● 高扩展性：可以非常容易的实现个性化的图表

性能对比

1024 条数据的情况下折线图的性能对比：



一些示例：官方示例



真实场景：