🥳G2 4.0 Released!

[simaQ]

G2 is a highly interactive data-driven visualization grammar for statistical charts.

After half a year of large-scale underlying refactoring and iterations, G2 4.0 is finally released. As the second major version release since the official open source release on November 22, 2017, this release still adheres to the original intention of creating a data-driven grammar of graphics. Moreover, it adds grammar of interactions based on grammar of graphics. It has been comprehensively enhanced in all aspects including features, experience, ease of use, and flexibility.

Brand New 4.0

Strictly speaking, this is not a refactoring, but a large-scale rewrite. We built a new G2 from the bottom up, from code to documentation.

TypeScript

We rewritten G2 and all its related modules using TypeScript and provided a complete type definition file.

Switchable Upgraded Graphics Engine

AntV/G is an easy-to-use, efficient and powerful 2D visual rendering engine. It provides implementations of various rendering methods such as Canvas, SVG.

With the release of AntV's underlying rendering engine G 4.0, G2 4.0 has brought many benefits such as multiple rendering modes (Canvas, SVG) support, partial redraw, and enhanced animation experience.

New Mechanism of Update

In previous versions, the process of data initialization and data update is essentially the same. The only difference is that the latter needs to clean up the previous graphics. Therefore, the graphic elements are totally re-created after the data is updated. That severely limits the consistent experience of interaction and animation.

So we introduced an new mechanism of data updating in 4.0, including:

1. Data updates of Geometry, for which we introduced the concept of Element.
2. Updates of visual components.

Example 1:  After the data update of the chart, the graphic elements are not destroyed. We can still operate on the Element instances fetched before the update.

Example 2: The update mechanism refines the data processing pipeline and provides the basis of better animation. In the following racing bar chart, different chart elements, including the text of Axis, text of Label, Geometry, can have customized animation during the phase of data update.

Visualization System Upgrade

Based on the requirements of each product under AntV: G2, F2, G6, L7, we redesigned the chart components to make the visualization system more powerful, flexible and interactive. While compatible with G2 3.x, features such as animation, constraint layout and interaction have been added.

Legend and axis text adaptation	Tooltip adaptive coordinate

View Module

View is a container that has independent data sources and can draw multiple graphs. In G2 4.0, the responsibilities of Chart and View have changed: View is G2's canvas container, responsible for the management of sub-views, geometric markers, and visual components, while Chart is an exposed convenient entry point that inherits View. In 4.0, users can use View to develop customized multi-dimensional data analysis graphics according to the needs of their business. 

We also support View nesting and component automatic layout. Automatic layout covers various scenarios: data update, chart size change, coordinate system transformation, and chart component position update, etc.

Grammar of Interactions

Starting with G2 4.0, we refactored the implementation of events from the underlying G 4.0. The visual component layer unified interface and event mechanism. We split Element from Geometry to accommodate the new interaction mechanism. When all this is in place, a new chapter in Grammar of Interactions finally opens.

We divide an interactive behavior into individual steps. Each step consists of a trigger and an action. By assembling triggers and actions, we can build a variety of interaction behaviors, and these behaviors can also be superimposed.

Take the hover and highlight as an example. It has two interaction steps:

• Step 1: mouse enter graphic element, highlighting graphic element.
• Step 2: mouse leave graphic element, graphic element reset.

The triggers and actions for each step are as follows:

Then we can assemble using Grammar of Interactions:

Through this set of Grammar of Interactions, we have configured rich interactive behaviors for G2 assembly, which is convenient for users to get started quickly.

In the future we will try to make the Grammar of Interactions closer to natural language.

Refined Animation

Thanks to the new update mechanism, the animation configuration of G2 4.0 is more fine-grained. Users can set animations for chart components (Axis, Annotation, etc.) and Label text annotations, now. At the same time, we have also optimized the built-in animations for each Geometry.

Dark Mode

G2 4.0 has made a design upgrade with the dark theme.

Flexible Extension

G2 4.0 redesigned and unified the extension mechanism of each core module. Users can load the required function modules including customized Shape, theme, interation, component and animation. For specific use, please read the tutorial for import a module on-demand.

We also made a lot of optimizations to the API. We provides more user-friendly, easier-to-understand function naming and a more reasonable configuration item structure. The documentation and tutorials are also refactored. Visit the G2 website for more details.

Last But Not Least

Thank you very much for reading this article patiently. If you are interested in G2, you can follow us through the following channels：

• GitHub：https://github.com/antvis/g2
• Website：https://g2.antv.vision/

---

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

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

全新的 4.0

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

全面拥抱 TypeScript

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

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

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

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

更新机制引入

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

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

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

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

可视化组件体系升级

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

图例及坐标轴文本自适应	Tooltip 坐标系自适应

强大的 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. 交互环节 1：鼠标滑入图形元素，图形元素高亮
2. 交互环节 2: 鼠标滑出图形元素，图形元素恢复原始状态

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

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

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

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

细粒度的动画

得益于更新机制的引入，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：https://github.com/antvis/g2
• 官网：https://g2.antv.vision/

相关链接

• G2 4.0 升级指南
• 可视化的交互语法
• AntV 架构演进-G2 篇

[ChristopherTrimboli]

Great job!