简介

G2 4.0 将使用交互语法，交互语法的概要设计 已经完成，本文对交互语法进行详细设计，并枚举出所有可能的触发和反馈，后面章节将对常见交互进行伪代码验证。

类结构

交互的详细设计 - 图1

交互的生命周期

交互需要绑定到 Chart 或者 View 上，交互的周期有：

  • 添加交互
  • 执行交互
  • 移除交互
  • 暂停/重启交互（是否支持待定）

view 的接口

为了实现 Interaction 的操作，需要在 View 上实现以下方法：

  • interaction(‘name’);
    • showEnable()
    • start()
    • processing()
    • end()
    • rollback()
  • removeInteraction(‘name’);

具体的方法的实现，都在 InteractionController 上实现，调用过程如下： 交互的详细设计 - 图2

Interaction 的接口设计

Interaction 类管理一个交互各个环节的执行，维护交互的上下文，需要实现的功能：

  • 初始化相关的 Actions ，例如：框选过程中我们使用 Mask 和 RangeSelected 的两个 Action，需要对 Action 进行初始化。
  • 管理各个交互环节的执行
    • 执行到当前环节时，后面可以执行的环节
    • 验证一个触发是否可以执行
  • 交互的暂停/唤醒

所以 Interaction 的接口：

Interaction 的执行过程

Interaction 的执行环节有：

  • 示能，showEnable, closeEnable
  • 开始，start
  • 执行，processing
  • 取消，cancel
  • 结束, end
  • 回滚，rollback

这些环节的执行有依赖关系，我们以交互的状态来看各个交互环节之间的关系，有三个交互状态：

  • 未执行
  • 执行中

  • 已执行 交互的详细设计 - 图3 这三个状态转换的说明：

  • 无法从未执行-> 执行后，必须通过执行中

  • 一个交互一旦开始，在未结束和未取消的时，不能回到未执行状态，因为无法再次开始
  • 执行后如果未触发 rollback ，可以再次触发开始，进入执行中
  • 一旦 rollback 会回到未执行的状态，此时无法再次 rollback

Action 的接口

  • init()
  • destroy()

交互分类

我们可以按照触发的对象和反馈的对象分别对交互进行分类

触发的对象类型

触发对象主要有三种：

  • 容器（Chart、View）
  • Element
  • Component

我们只需要枚举出这三类对象可以触发的事件即可

反馈（Action）的对象类型

由于一个交互存在多个环节，如果我们以最终的交互结果的反馈作为分类标准可以有几类：

  • 数据，数据的过滤、更新（增删改）、排序
  • 容器，大小变化，视窗变化（缩放、平移）
  • 图表元素，状态变化（selected, active），显示/隐藏、顺序等
  • 组件：状态变化，更新

所以最终交互的分类就转换成反馈的分类上，如果我们把交互的一些中间环节的反馈也放入分类，我们可以在上面四种分类的基础上再增加 辅助交互的图形元素，例如：

  • Mask
  • Delegation

Action 的分类

数据

数据相关的 Action，我们可以拆分为多个 Action：

  • data 数据生命周期的管理：
    • add
    • remove
    • update
    • setData
  • filter 数据过滤
    • filterByCategory
    • filterByTime
    • filterByXXX
    • reset

  • sort 数据排序

    • sortBy
    • reset

      容器

      容器的 Action 可以分为：

  • Chart

    • resize
    • transform
  • View
    • resize
    • show
    • hide
    • transform
  • Geometry
    • show
    • hide

Element

图表的图形元素对应的 Action 可以支持常见的交互

交互的详细设计 - 图4

  • ElementState 设置 Element 状态的交互反馈，可以扩展出多种 Action:

通用的方法有：

  • setState()
  • toggle()
  • reset()
  • clear()
    • ElementRangeState 范围内设置 Element 状态的交互，可以扩展出多种 Action

通用的方法：

  • start()
  • end()
  • setState()
  • startMove()
  • endMove()
  • move()
    • ElementFilter

      Component

      通用的 Component 支持的操作
  • Component
    • show
    • hide
    • move
  • 列表操作，分类图例、Axis，可以继承出多个 Action

交互的详细设计 - 图5 ListState 通用的方法有：

  • setState()
  • toggle()
  • reset()
  • clear()

ListRangeState 通用的方法有：

  • setState()
  • start()
  • end()
  • clear()
    • Slider 操作
  • 连续图例
    • 编辑
    • 拖拽
    • Tooltip
    • Annotation

      辅助交互的图形

  • Mask
    • show
    • hide
    • move
    • resize
    • remove
  • delegation
    • show
    • hide
    • move
    • resize
    • remove

交互的实现

最终的类图： 交互的详细设计 - 图6