G2 中的 Geometry 是什么？他其实是一种绘制图形。不同的 geometry 具体的区别在于他能创建不同的 shapePoints，图形的关键点信息，这些关键点最终可以展示成不同的图形。

几点大的设计前提：

  • scale 在 view 中统计创建，在 geometry 的生命流程中，scale 都已经出创建好了
  • coordinate 同上
  • scale 对于 range 的

柱形图的绘制流程：

  • 初始化（init、update）
    1. 根据视觉通道字段，创建或者更新 attribute 实例
    2. 处理数据
      1. 根据分组字段分组（color size shape 中的分类字段）

    3. 调整 scale
      1. stack 的 scale 处理
  • 渲染（render）
    1. 生成关键点（通过 { x y y0 size } 产生 points 数据）
    2. 数据映射
      1. 使用 attribute 映射视觉通道
      2. 通过 coordinate 将 position.xy 映射成成画布坐标
    3. 绘制 element：新增、更新、删除
      1. 组织生成 shapeInfo
      2. element.draw()

上述流程，对于其他 geometry 也基本适用，不同的 geometry 可能对上述的部分流程进行重写覆盖。

内容

  • element diff 逻辑 @逍为(hustcc)
  • shapes @逍为(hustcc)
  • element diff 之后的动画 @万木
  • 柱子的宽度使用 scale 处理（目前来看很难实现，暂时不管）
  • 梳理和确定 ShapeInfo 结构 @逍为(hustcc)
  • adjust 模块接入 @万木
  • size 计算（主题：根据 theme.columnWidthRatio）
  • scale 的 range 调整（view 中做）