介绍一些 G2 5.0 的开发思考和背景信息。

2021 中就筹备准备做 G2 5.0，设计了一个版本，但是因为太忙，没有人手来做，所以过去的大半年，G2 依然是 🐶 在 4.0 半年。

为什么要做 G2 5.0？

核心原因

存量的历史问题，如：布局、性能、数据流程、辅助组件等问题，由于技术设计上存在的问题，已然无法通过补丁的方式来进行修复解决。有些问题的修复，由于历史包袱的存在，无法下手解决，且存在技术上的 break change。

在这样的背景下，我们需要在能力和稳定上做一个取舍和平衡，G2 设计理念依然是基于图形语法的可视化引擎，但从技术实现上需要重新定义，拓展可视化描述，解决技术债问题。同时，我们也希望在此基础上，保障 G2Plot（基于图表分类学的可视化图表库）在底层升级 G2 5.0 之后，对外是兼容的。

技术设计上的糟粕

  • 数据处理的流程耦合

View 和 Geometry 的生命周期来回跳，互相依赖对方产生的数据，这个带来了代码十分晦涩。此外，存在数据处理的互相依赖关系，带来很多问题。
image.png

  • 图形通道固定收敛

图形的视觉通道收敛成 position、color、size、style 几个，所以不同的 Geometry 对于这几个通道的解释有区别，甚至不同 shape 对于通道的解释也有区别，这本身就带来不灵活的扩展性，以及不够语义化。

  • scale 和字段绑定，而字段可能和多个通道绑定

设计上，比例尺（scale）是和字段绑定的，从数据中去推断 scale 类型，然后在这个基础上，又产生一个 attr 的模块去让 scale 间接的和视觉通道（channel）绑定。事实上，一个字段可能和多个通道绑定，不同通道对应的相同字段含义可能是不同，因此，比例尺的类型也不一定相同，此外，scale 在不同 geometry 的同一通道上的类型也不一定相同。

👉 默认推荐 scale 类型的推导方式：channel + geometry + data + options

补充：Attribute 模块主要用来“翻译”数据，将数据转换为对应图形通道的视觉属性。举个简单例子，color('sex') 将 sex(性别) 映射到 color 通道上，有f('male') = 'red'，此时对应 sex = 'male'的几何图形元素为红色，但是此时想拿到具体单个元素对应的原始数据，就已经丢失了。

  • 布局逻辑 auto padding

导致两次组件渲染，组件内、组件间的布局逻辑互相干扰，带来 bug。
image.png

  • 辅助组件不够完善，且不与数据绑定

辅助组件依赖的 @antv/component 不够完善，API 使用上存在很多困扰，也无法扩展出灵活多变的辅助组件；同时很多无法体现数据驱动，导致数据交互过程中，辅助组件无法同步更新。

  • 统计能力差

在很多洞察分析下，统计相关的数据很重要，比如：占比、总计、平均值等，这些数据在 brush、drilldown 的场景下是不能提前聚合计算的。由于设计层面上的缺失，导致很多统计相关诉求无法满足。

可视化能力尚不完善

:::info 《数据之美》一书讲到“可视化不仅仅是一种工具，更像是一种媒介，帮助我们挖掘数据背后的信息”。可视化设计除了将信息和数据转化为用户可以理解的图形、图表等元素之外，还能够通过色彩、样式等去凸显其中的变化，让数据“开口”讲故事。 :::

因为一些设计上的问题，导致在过去很多年，很多可视化应该具备的能力一直没有完善，包括但不至于：

  1. 平行坐标系
  2. 辅助组件（丰富视觉层次）
  3. 时序
  4. 动画语法
  5. 单元可视化
  6. …

整体来说，G2 在社区的影响力，特别是学术界的影响力，还很弱。

新的底层渲染引擎 G

G2 5.0 重新设计的重要契机

新的底层渲染引擎 G 提供了：

  1. 场景树的 UI 构造方式，更好的组件沉淀模式
  2. 更好的质量
  3. 更高的性能

这个版本的 G 是完全可以成为整个 AntV 的大底层的，而不是架构图上说说而已。

G2 5.0 要达成的目标

不破不立，如果还背着包袱，G2 的上限就永远是这个。

新的 G2 5.0 通过完全的技术架构，需要达成：

技术目标

写让我们感到自豪的代码和架构。

image.png

  1. 解决存量问题，或者在功能和稳定上做取舍
  2. 全新的 schema（specification），拓展可视化描述（不限于统计图表，供更多场景使用）
  3. 新架构，让大量新特性的成为可能，提升专业性
    1. 一些简易的布局能力，分面能力加强
    2. 声明式数据转换、数据统计能力
    3. scale、coordinate 能力扩充
    4. 时序
    5. 动画语法
    6. 单元可视化
    7. 可视化叙事
    8. 多 scale 组合的辅助组件
  4. 升级全新 G 版本，辅助组件升级为 GUI
  5. 尽量保持兼容，但是不强制兼容 | G2 命令式 API | G2Plot 配置式 API | | —- | —- | | **derer | | | GUI（可复用、可迭代的可视化 UI 组件物料库） | | | G（渲染） | |

社区目标

只有技术质量达到一定的水平，我们自己认可，才会提升我们的运营激情。毕竟谁也不想说这屎山是我写的。

  • 产出所有开发过程中的技术设计、分享文章、专利 5+
  • 开源开放，能够让社区同学参于共建（5+）
  • 与国际上的可视化产品同台竞技，学术界推广，持续运营
  • 参入 ChinaVis 2022 挑战赛、大会、沙龙

其他信息

里程碑：

  • 6 月 alpha 版本，覆盖 80% 的 G2 旧能力，一次预告运营
  • 8 月案例验证结束，发布 beta 版本，开始服务业务（知蛛、图灵中统计图表技术栈混乱的问题）

image.png