【技术战疫】G2 4.0 正式版发布!

简介: ![image.png](https://ata2-img.cn-hangzhou.oss-pub.aliyun-inc.com/b38d8b3099e0f743dffb1e0f535b0f0c.png) > G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法。 经历了为期半年的大规模底层重构和开发迭代,G2 4.0 终于和大家见面了。作为继 2017 年 11 月 2

image.png

G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法。

经历了为期半年的大规模底层重构和开发迭代,G2 4.0 终于和大家见面了。作为继 2017 年 11 月 22 日 G2 3.0 正式开源发布以来 G2 的第二次大版本发布,4.0 版本仍坚守着『打造数据驱动的高交互图形语法』的初心,在图形语法的基础上,新增了交互语法,同时在产品的功能、体验、易用性和灵活性等各个方面进行了全面提升。

全新的 4.0

首先欢迎 一波 star ~~~~

严格意义上来说,这并不是一次重构,而是一次大规模的重写,我们自底向上,从代码到文档,构建了全新的 G2。

全面拥抱 TypeScript

我们使用 TypeScript 重写了 G2 以及其相关的所有模块,并提供了完整的类型定义文件

image.png

绘图引擎升级,多引擎切换

G 是 AntV 旗下一款易用、高效、强大的 2D 可视化渲染引擎,提供 Canvas、SVG 等多种渲染方式的实现。

随着 AntV 底层渲染引擎 G 4.0 的发布,为 G2 4.0 带来了Canvas、SVG 多渲染模式支持局部刷新动画体验增强等多种利好。

2020-02-28 10-06-29.2020-02-28 10_09_57.gif

更新机制引入

在 G2 之前的版本中,数据初始化和数据更新的流程本质上一样,区别仅在于后者需要把之前的图形清理掉,所以在数据更新之后,图形元素都是重新创建的,与数据更新前的图形元素无法进行关联,这就对动画、以及交互的一致性造成了影响。所以我们在 4.0 中引入了更新机制,包括:

  1. Geometry 的数据更新,为此我们引入了 Element 概念;
  2. 可视化组件的更新。

示例一:在图表发生数据更新后,数据更新前的图形元素并没有被销毁,我们仍然可以对更新前取到的 Element 实例进行操作。

2020-02-28 11-09-27.2020-02-28 11_10_38.gif

示例二:更新机制的加入,细化了数据的处理流程,为图表的细粒度动画提供了基础。以下动态条形图,当每次数据发生更新时,坐标轴文本 Axis、图形文本标注 Label、几何图形 Geomtry等图表元素,均可在更新阶段定制对应的动画。

2020-02-28 11-20-25.2020-02-28 11_22_16.gif

可视化组件体系升级

结合 AntV 下各个产品:G2、F2、G6、L7 的需求,我们重新设计了图表组件,形成了功能更强,自由度更高,扩展性更好,面向交互的可视化组件体系。在兼容 3.x 功能的基础上,增加了动画、约束性布局以及交互等功能。

图例及坐标轴文本自适应 Tooltip 坐标系自适应
111.gif 222.gif

强大的 View 模块

View 是拥有独立数据源,并且能够绘制多个图形的容器。相比于 3.x,4.0 中 Chart 和 View 的职责发生了一些变化:View 是 G2 的画布容器,负责子 View、几何标记以及可视化组件的管理,而 Chart 是继承 View,直接暴露给开发者的便捷使用入口,在 4.0 中,用户可以根据自己业务的定制需求,使用 View 去开发个性化的数据多维分析图形。另外我们还支持了 View 嵌套以及组件自动布局。

支持各种场景下的自动布局:数据更新、图表尺寸变化、坐标系变换以及图表组件位置更新等。

2020-02-24 20-15-20.2020-02-24 20_56_47.gif

全新的交互语法

G2 4.0 开始,我们从底层的 G 4.0 开始重构事件的实现,可视化组件层统一接口和事件机制,G2 层 Geometry 拆分出 Element 以适应新的交互机制,当这一切就绪,交互语法的新篇章终于开启

image.png

我们将交互行为拆分成一个个交互环节,而每个交互环节又由一个个触发对象和反馈对象组成,通过对触发对象和反馈对象的拼装组合,我们就可以搭建出各种各样的交互行为,而交互行为之间又可以进行叠加使用。

以鼠标 hover 图形,图形高亮为例,该交互行为由两个交互环节组成:

  1. 交互环节 1:鼠标滑入图形元素,图形元素高亮
  2. 交互环节 2: 鼠标滑出图形元素,图形元素恢复原始状态

对以上描述,我们可以分析出每个交互环节的触发对象、触发事件、反馈对象以及结果,如下:

image.png

于是我们就可以使用交互语法进行组装:

通过这一套交互语法,我们为 G2 组装配置了丰富的交互行为,方便用户快速上手使用。

ie8.gif ie5.gif 2.gif
12.gif 13.gif A_s-JWTrKjUP4AAAAAAAAAAABkARQnAQ.gif

将来我们将会尝试让交互语法会更加自然化,让用户可以通过更加符合文法的方式进行使用。

细粒度的动画

得益于更新机制的引入,G2 4.0 的动画配置更加细粒度,在原有 Geometry 动画的基础上,用户还可以对图表组件(Axis、Annotation 等)及 Label 文本标注进行动画配置。于此同时,我们还优化了各个 Geometry 的内置动画。

a1.gif a2.gif 2020-02-28 13-38-01.2020-02-28 13_38_28.gif
2020-02-28 13-34-51.2020-02-28 13_35_29.gif path.gif a3.gif

『暗黑』主题

在图表主题上,G2 4.0 做了一次设计的升级,同时新增了 'dark' 主题。

image.png

灵活的扩展机制

G2 4.0 重新设计并统一了各个核心模块的扩展机制,相比 3.x 版本,粒度更新,机制更灵活,用户可以基于最核心的模块,按需加载需要的功能模块,包括自定义 Shape、主题、交互、组件、动画等。

除了以上变化之外,我们还对 API 进行了大量的优化,在最大程度兼容 3.x 语法的基础上,提供了对用户更加友好,更易理解的函数命名以及更合理的配置项结构,同时还对教程及 API 文档进行了重构。欢迎访问 G2 官网了解更多细节内容。

如何升级

为了尽可能简化升级,G2 4.0 保持了最大程度上的兼容,但是仍然有一部分 breaking change 需要注意。

最后

非常感谢您的耐心阅读,如果你对 G2 感兴趣,可以通过以下渠道关注我们:

相关链接
相关文章
|
10月前
|
云安全 人工智能 安全
重磅发布,阿里云安全大模型正式投入使用
2023年云栖大会,阿里云安全正式宣布基于通义千问大模型训练的安全大模型投入使用。首期开放的功能包括为用户提供定制化的安全告警解读、事件调查及处置建议服务,覆盖全网超过99%的告警事件类型。即日起,用户可在阿里云安全中心免费使用体验。
1414 4
重磅发布,阿里云安全大模型正式投入使用
|
数据采集 监控 Dubbo
官宣!Hippo4j 1.4.x 新版本正式发布,探索更多玩法
官宣!Hippo4j 1.4.x 新版本正式发布,探索更多玩法
316 0
|
监控 人机交互 持续交付
低调不了!最佳体验尽在 Erda 2.0 版本
大家期待已久的 Erda V2.0 带着全新界面风格和特性改进震撼发布! 本次版本升级也意味着 Erda 在技术层面不断提升的同时,在用户体验上也投入了大量精力。界面作为人机交互的重要“桥梁”,我们希望用户感受到的不仅仅是 Erda 的强大功能,更希望给大家呈现优雅、舒适的操作体验!那么下面我们一起来看看本次新版本将会有哪些亮点和大家见面~
160 0
低调不了!最佳体验尽在 Erda 2.0 版本
|
传感器 编解码 编译器
3988元起,「方舟编译器」加持,华为P30系列国内正式发布
3 月 26 日,华为在法国巴黎发布了今年的首款旗舰手机 P30 系列,其再次刷新 DxOMark 排行榜,以及「望远镜」、「夜视仪」一样的拍照能力让人印象深刻。对于很多人来说,唯一的问题就是多少钱可以买到了。
173 0
3988元起,「方舟编译器」加持,华为P30系列国内正式发布
|
安全 Windows
Adobe下周将推新补丁和新的更新模式
4月9日消息,Adobe今天宣布,他们计划在下周二(2010年4月13日)推出一个新的安全漏洞补丁,修复Reader和Acrobat产品线上的数个高危安全漏洞。 这款补丁将会让Adobe开启自动更新推送,该公司希望此举能够加快补丁的部署进度。
1025 0
|
UED
微软承诺很快发布IE9正式版
微软在上周发布了IE9 RC(9.0.8080.16413),面向全球用户提供了约40种语言。IE9 RC在性能、用户体验、安全性、隐私性等方面都取得了长足进步,尤其是速度方面,IE9 RC不仅比Beta快很多,还超过了其它所有对手。
699 0
|
安全
暴风影音邀安全厂商联手认证 提前发布特别版
  6月15日消息,暴风公司宣布原定于6月19日发布的“暴风门”特别版软件已经完成开发,为了让广大用户更放心的使用,暴风公司已经邀请包括瑞星、金山、360安全卫士、卡巴斯基和KV在内的五大安全厂商联手对新版本软件进行深度检测。
889 0
|
测试技术 Android开发 开发者
网易与Google合作,于GDC开幕首日发布开源UI自动化测试方案
TechWeb报道】美西时间3月19日,在GDC开幕第一天的Google开发者专场,Google发布了一款由网易研发的UI自动化测试方案:Airtest Project。
1335 0