搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 开源最前线 > 蚂蚁金服数据可视化解决方案 AntV 3.0 全新发布

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

开源最前线 2017-12-01
开源最前线(ID:OpenSourceTop) 猿妹 整编

资料来源:蚂蚁金服科技



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



G2 3.0 的变化


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


下面来看看,3.0 具体带来了哪些新特性?



高速渲染,即时交互响应


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

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

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


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

▲热力图连续图例过滤


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

▲即时交互响应


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


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

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

▲自定义动画



事件完备,无限交互可能


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


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


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

▲任意元素自定义交互



更完备的定制化能力


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

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

▲自定义图例以及 tooltip



更强的分面功能


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

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

▲分面定制效果



数据处理外置,轻装上阵


要说 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 图:

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

▲Treemap

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

▲Voronoi diagram


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

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

▲Voronoi 在极坐标上的变体


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

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


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

▲矩形分箱



G6 1.2 更丰满、更稳健


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



统一分层布局


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

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

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



Minimap,缩量图


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

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

▲plugin.tool.minimap – 缩量图



分析模板


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

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



基于 d3 的扩展


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

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



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


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

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

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

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



性能对比


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

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


一些示例:官方示例


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


真实场景:




●本文编号96,以后想阅读这篇文章直接输入96即可

●输入m获取文章目录

↓↓↓ 点击"阅读原文" 进入GitHub详情页 

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《蚂蚁金服数据可视化解决方案 AntV 3.0 全新发布》的版权归原作者「开源最前线」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注开源最前线微信公众号

开源最前线微信公众号:OpenSourceTop

开源最前线

手机扫描上方二维码即可关注开源最前线微信公众号

开源最前线最新文章

精品公众号随机推荐