蚂蚁金服数据可视化解决方案 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 ,就能绘制出符合人基本美学和阅读习惯的分层关系图。该插件着重展示关系数据的流向,非常适用于流程类关系数据。

Minimap,缩量图

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

分析模板

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

基于 d3 的扩展

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

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

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

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

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

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

性能对比

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

一些示例:官方示例

真实场景:

资料来源:蚂蚁金服科技

觉得本文对你有帮助?请分享给更多人

关注「前端大学」,提升前端技能

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171211A0OU6000?refer=cp_1026

扫码关注云+社区