Question

G2 4.0 的架构可以描述成以上架构图。我们可以理解成它主要包含的两大部分：

• 静态渲染
• 动态交互

图形静态渲染就是将可视化组件（Axis、Legend...）和图形（Line、Interval...） 这些元素组织到一起，然后通过一个布局逻辑，将他们有序的绘制到画布上。

图形动态交互是指图形的交互能力，这个对于数据分析来说非常重要。G2 中通过提供丰富的事件、元素的状态量，来构建一层基础的交互机制，然后基于这个交互机制，去实现一套配置式的自定义交互语法，降低交互开发成本。

那么我会着重介绍两点和图标体验打磨相关的技术点，以及它在新旧版本中的对比：

1. 画布的约束布局
2. 交互语法

Auto Padding vs 约束布局

• G2 3.x 中的 Auto Padding

大搞的流程是：

1. 在一个 400*300 的画布中，首先将图形部分绘制到画布中，占满整个画布；
2. 然后根据 x y 数据字段，来绘制 x y 轴，并放到画布下方和左方；
3. 根据分组字段绘制图形，并放置到下方；
4. 然后将超出画布的部分，座位图形的 padding
5. 向内收缩图形，形成最终的图表

这是一个通用的方案，所有类型的图表绘制，都是用这样的一个方案，带来的问题有：

1. 因为坐标做标签超长，导致左侧的 padding 太多，所以画布左边空白比较多
2. 因为左侧图例的大小不对，导致左侧 padding 过小，所以图例和坐标轴挤到一起
3. x 轴在画布收缩过程中，因为宽度变小，导致轴标签进行了自动旋转，导致被画布裁剪

等等，这些有和画布布局相关的问题，80% 都是和 auto padding 相关，并且因为是一个通用布局方案，所以这些问题很难进行修复。

为了解决可视化图表在静态渲染中遇到的裁剪、碰撞问题，我们将约束布局引入到可视化中。

• G2 4.0 中的约束布局

约束布局的理论依据是 线性等式、不等式的非负解求解算法 。我们看个例子。

这个求解算法是非常成熟的算法，在不同语言上都有对应的算法实现。而且在 Android、iOS 中，都提供对应在 UI 布局上的约束布局能力。结合这个算法，我们将约束布局的能力引入到可视化图表渲染中来。

举个例子：

首先，我们规定，所有的图表元素都有四个变量 x y width height，他们决定了元素在画布中的决定定位。

基于图形中元素的相对位置关系，我们可以列出这样的约束关系方程组。然后代入算法求解：

就可以获得所有元素的位置大小信息，拿到这些信息，再进行画布的渲染，就没有任何难度了。使用约束给我们带来了哪些好处呢？

1. 将画布布局的问题转化成数学求解问题
2. 解除了因为组件之间的位置依赖关系带来的布局代码耦合
3. 强大的布局能力，是响应式图表的基础

约束布局可以解决了静态渲染中常见的组件裁剪、遮挡问题。另外一个大的部分就是动态交互的优化和增强。

Event + API vs 交互语法

• G2 3.x Event + API

在我们进行 web 页面上的交互开发的时候，我们常常的逻辑是这样的（以 jQuery 为例）：

基本逻辑就是通过找到对应的元素，监听事件，然后在事件触发的时候，执行相应的动作和命令。（比如上图是清理缓存的交互）

而在 G2 3.x 中，采用了类似的形式去开发交互，比如下面在图例 hover 的时候，高亮图形。

基于 Event + API 的方式，可以很灵活的开发自定义交互，完全没有任何限制，这是他的优点，但是缺点也很明显：

1. 需要精通底层的架构和 API，开发成本高
2. 开发交互的流程代码很繁杂丑陋
3. 代码逻辑几乎无法复用

为了解决这些问题，降低自定义交互开发的成本，我们在 G2 4.0 中提出了交互语法。

• G2 4.0 交互语法

**

首先，我们将一个交互过程定义为 5 个阶段：

1. 示能
2. 开始
3. 持续
4. 结束
5. 回滚

每个阶段又包含有：

• 触发：触发这个交互阶段的事件和来源；G2 4.0 内置 200+ 组合事件
• 反馈：触发之后，对应执行的 Action；G2 4.0 内置 30+ 多个 Action

通过这些之后，我们开发一个交互就是配置的过程，我们看一个例子：

这是一个圈选图形，生成 mark 展示全选区域，然后选中的图形进行高亮。对应各个阶段的触发和反馈配置就是：

而最终用到代码中的交互配置就是：

通过这样的方式，我们可以大大降低自定义交互的自定义成本，开发者只需要利用 G2 提供的丰富的内置事件和 Action，通过拼接组合就是完成交互的开发。

最后总结一下 G2 这部分的内容。G2 包含有三大部分：

1. 图形语法，可以提供图表变换的丰富度
2. 约束布局，提供强大图表静态渲染和布局能力
3. 交互福安，可以让我们低成本的开发复杂交互

基于这些我们就去做我们新的一个产品 G2Plot，去逐一打磨可视化图表的体验细节。