2017年的11月22日,G2 正式开源,发布了3.0版本。3.0 是 G2 的一个重大版本升级,从这个版本开始,我们确认了打造“数据驱动的高交互图形语法”的愿景;从底层夯实了架构基础,完善开发、测试和发布的迭代流程,开始以更开放的姿态为成熟的图形语法理论增添数据驱动和高交互的特质。


算起来,从 3.0 开源到现在已经过去近半年。这半年里,我们从未停止过对扩展图形语法能力边界的探索,G2 也从 3.0 迭代到今天的 3.1 版本。具体说来,G2 有了哪些值得一提的变化呢?


更丰富的数据处理和图表类型


在1月6日的 SEEConf 大会分享上,我们给大家介绍过,“数据驱动的高交互图形语法”这套框架理论上是可以画“无数种图表”的。为实现这一目标,更为扩展 G2 的能力边界,我们开始了一个名为“256 plots”的计划。也就是用 G2 画我们在网上能找得到的所有类型的图表(目前仅限于二维可视化图表)。


现在我们可以很高兴地告诉大家,截至3.1版本发布,“256 plots”计划完成近70%,G2 已经可以轻松应对共 170 多种不同的可视化图表,新增支持的图表类型包括不限于下列图表:


来自 D3 社区的图表

韦恩图

水波图

华夫饼图

甘特图

Enclosure Diagram

六边形坐标地图(HexJSON)


我们从 D3 社区得到了最多的灵感和帮助,G2 也支持直接使用 D3 社区中大部分的扩展,上述图表大部分就是直接依赖 D3 社区沉淀的组件并使用 G2 绘制的。还有 D3 全系列关系图、地图的支持,这里就不一一列举了。再次向 D3 致敬!


来自 R 语言社区的图表

分箱示意地图

花瓣图

分段颜色图


来自其他可视化社区或者商业软件的图表

地平线图

符号地图

饼柱图

迷你图

分组层叠柱状图

元素周期表


更丰富的图表类型得益于 DataSet 数据处理能力的提升以及 G2 内置了更多的几何图形支持。“数据驱动的高交互图形语法”这套可视化图表的绘图架构,让我们不仅仅能复刻经典的图表,更能基于这些图表扩展出更多的形式和玩法来。


譬如水波图和华夫饼图原本是一维数据的可视化,通过图形语法的扩展,我们马上能加上分组,画出二维数据的可视化结果:

水波图-二维

华夫饼图-二维


更多的优化细节


量变也许是引发质变的必要条件。在为 G2 扩展更多图表类型的过程中,我们发现了一些 3.0 版本初期不够完善或者不够严谨的地方。随着3.0用户的增多,不少使用不便利的地方或者遗留的 Bug 也逐渐被暴露出来。对此,我们一直在对项目进行升级和优化,同样,包括并不限于以下几方面:


Windows 开发支持


从刚开源的时候开始,就有 Windows 用户表示,想要把 G2 项目 clone 到本地进行二次开发。于是在社区的帮助下,我们把开发、测试和构建等等脚本都实现了对 Windows 环境的兼容。


TypeScript 语法提示


TypeScript 社区过去半年也出现了非常多的 G2 用户,不过 G2 暂时没有迁移到 TypeScript 开发的计划,因此在两三名社区开发者的帮助下,G2 加上了 TypeScript 的定义文件,基本能满足一般的语法提示等需求。


按需加载


随着功能不断增加,G2 的打包大小也逐渐变大,按需加载成了越来越迫切的需求。3.1 版本对 G2 的架构进一步做了调整,实现了大部分功能的按需加载(事实上 AntV 的开源产品都实现了按需加载),并且提供了一个小小的辅助工具,让大家可以在一个 UI 上选择需要的模块进行打包。


图表优化


除了架构和开发环境的优化以外,图表本身的细节和使用也悄悄地做了优化。举几个以往答疑时常常碰到的例子:图表支持自动计算 padding;polygon 的绘制(GeoJSON 画地图)不再有异常;词云不再有重叠; 热力图也修复了缩放的问题等等。


图表本身的优化是无止境的。除了完善经典图表的交互和视觉细节,咱们可爱的设计师们也在不断努力探索着更好的交互形式和视觉样式,这些诚意之作慢慢都会在 G2 项目上逐步实现。


开源之路,与你同行


G2 3.0 开源到现在,项目的 Star 数突破了 5k。虽然和 D3、ECharts 这些前辈相比,G2 还是小项目,还有很大的差距,不过经过这半年的迭代维护,我们真切地看到了图形语法的可能性,也从社区、用户、兄弟团队得到了越来越多的支持和鼓舞。事实上,上述所有的新图表、新特性都来自于用户的需求,相当一部分特性和 bugfix 甚至是由用户、社区直接贡献的。兄弟团队的小伙伴们不止给我们提 issue 提 pull request,甚至还帮我们分担产品答疑的压力。开源刚半年,世界很大,前路还远,G2 愿与你一起同行。




G2 是蚂蚁金服体验技术部 AntV 团队的重要产品之一。感兴趣的小伙伴们欢迎通过官网 https://antv.alipay.com / 邮件 antv@antfin.com / github https://github.com/antvis / 知乎 https://zhuanlan.zhihu.com/aiux-antv / 微博 https://weibo.com/antv2017 等等途径关注和联系我们。欢迎投递简历!