@逍为(hustcc)

交互语法是什么？目前不知道！

简单理解，交互本身是一系列交互事件，加上事件响应逻辑。交互语法要做事情，就是：

抽象出一些共通的地方，尝试使用几个 syntax 语法，就能够表达所有的交互。

类似图形语法，通过 scale、coordinate、marker 等语法概念，就可以有千变万化的可视化表达能力，甚至绘制出我们常规逻辑无法想到的图表。

问题

然而，当前的问题是：

  1. 我们不知道什么样的描述才是最好的交互语法。目前我了解到至少有 3 套：
    1. G2 4.0 内置的
    2. vega 的一套
    3. 山大学术合作的一套
  2. 交互语法好处在可描述，可推荐，可组装，但是对于业务定制来说，大概率永远都无法满足业务定制化诉求
  3. 业务开发的理解成本和开发门槛

解法

解决办法其实挺简单的，一句话：保留该有的扩展性、灵活性，一切交给社区和业务来选择。

主要分成为几层：

  1. 注册一个自定义交互，注册的是一个 Class instance
  2. 这个 Class 是按照交互基类 Interaction 开发的自定义交互
  3. 内置交互语法使用 grammar 内置方法去解析交互语法配置

设计

最基本的交互机制：

  1. import { registerInteraction, Interaction, grammar } from '@antv/g2';
  3. const ElementHighlight extends Interaction {
  4.     init() {
  5.       // bind events
  6.     // exec your code
  7.   }
  9.   destroy() {}
  10. }
  12. registerInteraction('element-highlight', ElementHighlight);
  14. chart.interaction('element-highlight', cfg);

G2 4.x 交互语法的使用方式：

  1. import { registerInteraction, grammar } from '@antv/g2';
  3. registerInteraction('element-hover', grammar.load({
  4.   start: {},
  5.   process: {},
  6.   end: {},
  7.   /* ... */
  8. }));
  10. // 除此之外，grammar 还提供 registerAction 的方法
  11. grammar.registerAction('name', Action);

怎么解决之前提到的问题：

问题一：提供一套内置的交互语法，弱化语法；周边提供两套语法，社区迭代。

问题二：使用 Interaction 顶级 API 做自定义开发，除了基类生命周期，没有任何约束。

问题三：提供 grammar API 包

如何扩展一套交互语法

  • 定义语法

可以是一套 json schema，也可以是多个 API 概念，通过变成组合起来。最终都是通过一个 parse 过程将交互变成一个 Interaction class。

交互语法设计 - 图1

  • 暴露 API

每种交互语法肯定有自己的 API 设计，这个时候，将这套 API 精简后暴露出来，方便开发者做自己的自定义 。

比如 G2 4.x 中的交互语法设计，暴露出来的 API 就是两个：

  1. grammar.parse
  2. grammar.registerAction