G24.0正式版发布!·语雀
G2 是⼀套⾯向常规统计图表,以数据驱动的⾼交互可视化图形语法。
经历了为期半年的⼤规模底层重构和开发迭代,G2 4.0 终于和⼤家见⾯了。作为继 2017 年 11 ⽉ 22 ⽇ G2 3.0 正式开源发布以来 G2 的第⼆次⼤版本发布,4.0 版本仍坚守着『打造数据驱动的⾼交互图形语法』的初⼼,在图形语法的基础上,新增了交互语法,同时在产品的功能、体验、易⽤性和灵活性等各个⽅⾯进⾏了全⾯提升。
全新的 4.0
⾸先欢迎⼀波 star ~~~~
严格意义上来说,这并不是⼀次重构,⽽是⼀次⼤规模的重写,我们⾃底向上,从代码到⽂档,构建了全新的 G2。
全⾯拥抱 TypeScript
完整的类型定义⽂件。
我们使⽤ TypeScript 重写了 G2 以及其相关的所有模块,并提供了完整的类型定义⽂件
绘图引擎升级,多引擎切换
G 是 AntV 旗下⼀款易⽤、⾼效、强⼤的 2D 可视化渲染引擎,提供 Canvas、SVG 等多种渲染⽅式的实现。
动画体验增强等多种利好。
局部刷新、动画体验增强
随着 AntV 底层渲染引擎G 4.0 的发布,为 G2 4.0 带来了Canvas、SVG 多渲染模式⽀持
多渲染模式⽀持、局部刷新
更新机制引⼊
在 G2 之前的版本中,数据初始化和数据更新的流程本质上⼀样,区别仅在于后者需要把之前的图形清理掉,所以在数据更新之后,图形元素都是重新创建的,与数据更新前的图形元素⽆法进⾏关联,这就对动画、以及交互的⼀致性造成了影响。所以我们在 4.0 中引⼊了更新机制,包括:
svg图形1. Geometry 的数据更新,为此我们引⼊了 Element 概念;
2. 可视化组件的更新。
⽰例⼀:在图表发⽣数据更新后,数据更新前的图形元素并没有被销毁,我们仍然可以对更新前取到的 Element 实例进⾏操作。
⽰例⼆:更新机制的加⼊,细化了数据的处理流程,为图表的细粒度动画提供了基础。以下动态条形图,当每次数据发⽣更新时,坐标轴⽂本 Axis、图形⽂本标注 Label、⼏何图形Geomtry等图表元素,均可在更新阶段定制对应的动画。
可视化组件体系升级
结合 AntV 下各个产品:G2、F2、G6、L7 的需求,我们重新设计了图表组件,形成了功能更强,⾃由度更⾼,扩展性更好,⾯向交互的可视化组件体系。在兼容在兼容 3.x 功能的基础上功能的基础上,增加了动画、约束性布局以及交互等功能。
图例及坐标轴⽂本⾃适应
Tooltip
坐标系⾃适应
ClosedAnocracy Democracy Colony ANoData OpenAnocracy Monarchy 100%80%50%30%0%190018201840186018801960198019201940
2000
1510199319951999199119941996199719981992
强⼤的 View 模块
View 是拥有独⽴数据源,并且能够绘制多个图形的容器。相⽐于 3.x ,4.0 中 Chart 和 View 的职责发⽣了⼀些变化:View 是 G2 的画布容器,负责⼦ View 、⼏何标记以及可视化组件的管理,⽽ Chart 是继承 View ,直接暴露给开发者的便捷使⽤⼊⼝,在 4.0 中,⽤户可以根据⾃⼰业务的定制需求,使⽤ View 去开发个性化的数据多维分析图形。另外我们还⽀持了 View 嵌套以及组件⾃动布局。
⽀持各种场景下的⾃动布局:数据更新、图表尺⼨变化、坐标系变换以及图表组件位置更新等。
全新的交互语法
G2 4.0 开始,我们从底层的 G 4.0 开始重构事件的实现,可视化组件层统⼀接⼝和事件机制,G2 层 Geometry 拆分出 Element 以适应新的交互机制,当这⼀切就绪,交互语法的新篇章交互语法的新篇章终于开启
终于开启。我们将交互⾏为拆分成⼀个个交互环节,⽽每个交互环节⼜由⼀个个触发对象和反馈对象组成,通过对触发对象和反馈对象的拼装组合,我们就可以搭建出各种各样的交互⾏为,⽽交互⾏为之间⼜可以进⾏叠加使⽤。
以⿏标 hover 图形,图形⾼亮为例,该交互⾏为由两个交互环节组成:
交互环节 1:⿏标滑⼊图形元素,图形元素⾼亮交互环节 2: ⿏标滑出图形元素,图形元素恢复原始状态
对以上描述,我们可以分析出每个交互环节的触发对象、触发事件、反馈对象以及结果,如下:
于是我们就可以使⽤交互语法进⾏组装:
2000
通过这⼀套交互语法,我们为 G2
组装配置了丰富的交互⾏为,⽅便⽤户快速上⼿使⽤。
registerInteraction('element-high start:
rigger:e1ement:mouseenter ction:element-high1ight:highight 万,end:
rigger:'element:mouseleave",action:element-highlight:reset ⼦
,);
miii 1951年1952年1956年1958年1959年1960年1962年1957年
将来我们将会尝试让交互语法会更加⾃然化,让⽤户可以通过更加符合⽂法的⽅式进⾏使⽤。
细粒度的动画
得益于更新机制的引⼊,G2 4.0 的动画配置更加细粒度,在原有 Geometry 动画的基础上,⽤户还可以对图表组件(Axis 、Annotation 等)及 Label ⽂本标注进⾏动画配置。于此同时,我们还优化了各个 Geometry 的内置动画。
『暗⿊』主题
在图表主题上,G2 4.0 做了⼀次设计的升级,同时新增了 'dark' 主题。
灵活的扩展机制
G2 4.0 重新设计并统⼀了各个核⼼模块的扩展机制,相⽐ 3.x 版本,粒度更新,机制更灵活,⽤户可以基于最核⼼的模块,按需加载需要的功能模块,包括⾃定义 Shape 、主题、交互、组件、动画等,具体使⽤请阅读按需引⽤教程。
除了以上变化之外,我们还对 API 进⾏了⼤量的优化,在最⼤程度兼容在最⼤程度兼容 3.x 语法的基础上语法的基础上,提供了对⽤户更加友好,更易理解的函数命名以及更合理的配置项结构,同时还对教程及 API ⽂档进⾏了重构。欢迎访问 G2 官⽹了解更多细节内容。
如何升级
为了尽可能简化升级,G2 4.0 保持了最⼤程度上的兼容,但是仍然有⼀部分 breaking change 需要注意,具体请参考 G2 4.0 升级指南。
最后
⾮常感谢您的耐⼼阅读,如果你对 G2 感兴趣,可以通过以下渠道关注我们:GitHub :github/antvis/g2官⽹:g2.antv.vision/
相关链接
G2 4.0 升级指南可视化的交互语法AntV 架构演进-G2 篇

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。