整体类图

此处只列出相比于 G2 3.X 的改变
image.png
说明：

  1. View 增加嵌套支持
  2. 为交互行为引入状态量管理机制
  3. 引入 Element 组概念

另外 G2 4.0 会提供组件化方案支持，以支持高定制化、高灵活度的场景，比如 storytelling 以及 g2-plot，详见 G2 组件化方案。目前来看组件化方案同 G2 4.0 的改造并不冲突，在 4.0 改造点的基础上，再将 Geometry 与 View 解耦开即可。

项目组织

使用组件模型来表示各个模块的关系
image.png
由此确定 G2 4.0 的项目结构如下：

暂定，最终以 github 上的项目结构为准

  1. |____chart
  2. | |____controller
  3. | | |____scale.ts
  4. | | |____event.ts
  5. | | |____coordinate.ts
  6. | | |____axis.ts
  7. | | |____legend.ts
  8. | | |____annotation.ts
  9. | | |____tooltip.ts
  10. | |____state-manager.ts
  11. | |____view.ts
  12. | |____chart.ts
  13. |____geometry
  14. | |____geometry.ts
  15. | |____element.ts
  16. | |____shape.ts
  17. | |____interval
  18. | | |____shape.ts
  19. | | |____index.ts
  20. | |____line
  21. | | |____shape.ts
  22. | | |____index.ts
  23. | |____index.ts
  24. |____interaction
  25. | |____index.ts
  26. |____theme
  27. | |____index.ts
  28. |____index.ts

数据处理流程

  • Legend 由 Chart 统一生成并管理
  • 事件交由 View 管理

chart 创建流程

chart 创建.png

chart 数据更新流程

chart 更新.png

Element & Shape 设计

@司马淇(simaqi)

—-> 详见链接 <—-

View 类设计

@逍为(hustcc)

类图中只列出主要的一些方法和属性，更详细的到时候 API 文档补充

image.png

💁‍♀️相比于 3.x，Chart 和 View 的更改：

  1. View 支持嵌套
  2. View 拥有自己的 Tooltip，并且直接在交互行为中生成，tooltip 实际是交互行为的反馈
  3. 一些方法重命名：
    1. coord() -> coordinate()
    2. guide() -> annotation()
    3. view() -> createView()
    4. source() -> data()，并且不再支持在方法中同时进行列定义，需要在 scale() 中设置
    5. 各个组件的配置项需要同新组建一起梳理
  4. 更加详细的生命周期

交互

💁‍♀️交互机制 + 内置的交互行为

Component 图表组件

💁‍♀️内容包含：包含 Axis、Tooltip、Annotation、Legend、Slider，同时提供动画、更新接口，以及同 G2 的集成。