G2 is a data-driven, highly interactive graphical visualization syntax for general statistical charts.
After six months of extensive low-level refactoring and development iterations, G2 4.0 has finally arrived. As the second major release of G2 since G2 3.0 was officially released as open source on November 22, 2017, version 4.0 still adheres to the original intention of “building a data-driven high interactive graphics syntax”. Based on the graphics syntax, interactive syntax is added. At the same time in the product function, experience, ease of use and flexibility and other aspects of a comprehensive improvement.
The new 4.0
First up, a new wave of star ~~~~
This was not a refactoring in the strictest sense, but a massive rewrite in which we built a new G2 from the bottom up, from code to documentation.
Embrace TypeScript
We’ve rewritten G2 and all its associated modules in TypeScript and provided the complete type definition file.
Drawing engine upgrade, multi-engine switch
G is an easy-to-use, efficient and powerful 2D visual rendering engine of AntV, providing the realization of Canvas, SVG and other rendering methods.
With the release of AntV underlying rendering engine G 4.0, G2 4.0 has brought many benefits such as Canvas, SVG multi-rendering mode support, local refresh, animation experience enhancement and so on.
Update mechanism introduction
Before G2 version, initialization and data update process is essentially the same, the difference only lies in the latter need to sort out before graphics, so after the data update, graphic elements are recreated, and the data update in front of the graphic elements could not be associated, this affects the consistency of animation, and interactive. So we introduced the update mechanism in 4.0, including:
- Geometry data update, for which we introduce the concept of Element;
- Visual component updates.
Example 1: After the chart is updated, the graphic elements before the data update are not destroyed, and we can still operate on the Element instance taken before the update.
Example 2: The addition of an update mechanism refines the flow of data processing and provides a basis for fine-grained animation of charts. For the following dynamic bar chart, the Axis text Axis, graphic text Label, geometric Geomtry and other chart elements can all be customized for animation during the update phase when the data is updated.
Visual component architecture upgrade
Combined with the requirements of various AntV products: G2, F2, G6, AND L7, we redesigned the diagram component, forming a visual component system with stronger functions, higher degrees of freedom, better scalability and interaction orientation. On the basis of compatible 3.x features, animation, constrained layout and interaction are added.
| Legend and axis text adaptive | Tooltip coordinate system adaption |
|---|---|
 |
 |
Powerful View module
A View is a container that has a separate data source and can draw multiple graphs. Compared to 3.x, the responsibilities of Chart and View have changed in 4.0: View is G2’s canvas container, responsible for the management of sub-views, geometric marks and visual components, while Chart is an inherited View and a convenient access directly exposed to developers. In 4.0, users can customize according to their own business needs. Use View to develop personalized data multidimensional analysis graphics. We also support View nesting and automatic component layout.
Support automatic layout in various scenarios: data update, chart size change, coordinate system change, chart component position update, etc.
New interactive syntax
Starting from G2 4.0, we reconstruct the implementation of events from the bottom layer G 4.0. The visualization component layer unify interface and event mechanism, and the G2 layer Geometry separates elements to adapt to the new interaction mechanism. When all this is in place, a new chapter of interactive syntax finally opens.
We divide the interaction into one interaction link, and each interaction link is composed of one trigger object and one feedback object. By assembling and combining the trigger object and feedback object, we can build a variety of interaction behaviors, and the interaction behaviors can be superimposed.
Taking mouse Hover graph and graph highlighting as an example, the interaction behavior consists of two interactive links:
- Interaction 1: Slide the mouse over the graphic element and highlight the graphic element
- Interaction link 2: The mouse slides out the graphic element, and the graphic element restores to its original state
Based on the above description, we can analyze the trigger object, trigger event, feedback object and result of each interaction link, as follows:
We can then use interactive syntax to assemble:
 |
 |
|---|
Through this set of interactive syntax, we have configured a variety of interactive behaviors for G2 assembly, which is convenient for users to use quickly.
 |
 |
 |
|---|---|---|
 |
 |
 |
In the future we will try to make the interactive syntax more natural and allow users to use it in a more syntactically correct way.
Fine grained animation
Thanks to the introduction of update mechanism, animation configuration of G2 4.0 is more fine-grained. Based on the original Geometry animation, users can also animate graph components (Axis, Annotation, etc.) and Label text Annotation. At the same time, we also optimized the built-in animation of each Geometry.
 |
 |
 |
|---|---|---|
 |
 |
 |
“Dark” theme
In terms of chart themes, G2 4.0 has a design upgrade, with the addition of a ‘dark’ theme.
Flexible extension mechanism
G2 4.0 redesigned and unified the extension mechanism of each core module. Compared with version 3.x, it has a newer granularity and a more flexible mechanism. Users can load the required functional modules based on the most core modules, including custom Shape, theme, interaction, component, animation, etc. For detailed use, please read the On-demand Reference tutorial.
In addition to these changes, we have made a number of improvements to the API, including more user-friendly and understandable function naming and configuration item structure, as well as refactoring of tutorials and API documentation, with maximum compatibility with 3.x syntax. Visit the G2 website for more details.
How to upgrade
In order to simplify the upgrade as much as possible, G2 4.0 maintains maximum compatibility, but there are still some breaking changes that need attention. Please refer to the G2 4.0 Upgrade guide for details.
The last
Thank you for your patience. If you are interested in G2, you can follow us through the following channels:
- GitHub：github.com/antvis/g2
- Liverpoolfc.tv: g2. Antv. Vision /
A link to the
- G2 4.0 Upgrade Guide
- Visual interactive syntax
- AntV Architecture Evolution – Chapter G2