交互 - Interaction
交互（Interaction）是 G2 中的重要 API，通过这个方法可以加载 G2 内置的交互，或者基于交互语法形式自定义的 Interaction 交互。G2 4.0 在交互方面做了非常大的调整，所有的交互代码都是插入式的，通过交互语法进行组织。使用交互的方式也非常简单，仅需要设置交互的名称即可。关于交互语法可以阅读 交互语法 。
(name: string, cfg?: object) => View;chart.interaction('my-interaction', { extra: 'hello world' });
配置交互类型，可以传入 G2 默认支持的交互类型，也可以通过
registerInteraction
自己注册交互方式。第二个参数是用来给自定义交互传入参数的，目前 G2 默认支持的交互类型无需传入第二个参数。
内置交互
为了便于用户的使用，G2 在 Chart 中内置了几种交互：
- tooltip：鼠标在 chart 上移动时显示提示信息
- legend-active：鼠标移动到图例选项时，图例项高亮，对应的图形高亮
- legend-filter：分类图例的勾选
- continuous-filter: 连续图例的过滤
- chart.interaction(name, [cfg]) 添加或者修改交互
- chart.removeInteraction(name) 移除交互
- showEnable：标识交互可以发生
- start: 交互开始
- processing: 交互持续
- end: 交互结束
- rollback: 回滚
- trigger 触发一个交互环节的事件名，是所有 Chart 支持的事件
- 字符串由 ’actionName:method‘ 组成
- 列表时可以使用相同的 action ，也可以使用不同的 action ，例如: ['element-active:clear', 'element-active:active', 'mask:clear']
- isEnable(context): 是否可以触发
- callback(context): 触发后执行完所有 action 的方法后会调用回调函数
- once: boolean， 是否在一个环节内仅能执行一次
- wait: 等待时间
- immediate: 是否马上执行
- wait: 等待时间
- leading: 是否马上执行
- trailing: 执行完毕后再执行一次 debounce 和 throttle 的机制参考： https://css-tricks.com/debouncing-throttling-explained-examples/
- 可以通过 context.isInPlot() 判定事件触发时，事件发生的位置是否在绘图区域内
- 可以通过 context.isInComponent('legend') 判定是否发生在 legend 的包围盒内
- 可以通过 context.event.target 或者 context.getCurrentShape() 获取触发的图形
可以通过 Chart 上的配置项 defaultInteractions 更改内置的交互
new Chart({
container: 'container',
width: 500,
height: 500,
defaultInteractions: ['tooltip'], // 仅保留 tooltip
});配置交互
除了通过 defaultInteractions 来配置交互外，你可以通过 Chart 上的两个接口来添加和移除交互：
添加或者修改交互时的第二个参数 cfg 是来修改已经定义好的交互的行为，G2 4.0 中的交互全部由交互语法组装而成，可以参考 交互语法 ，我们在这里不对交互语法进行详细的介绍。
chart.interaction('tooltip'); // 使用交互
chart.interaction('element-active');
chart.interaction('legend-visible-filter');
chart.removeInteraction('element-active'); // 移除某个交互在交互语法中一个交互可以由多个交互环节组成，每个交互环节可以有多个触发和反馈，所以在配置交互时可以配置每个环节，每个环节都是数组，都有 trigger 和 action
修改交互的默认交互
我们以修改 tooltip 的交互为例来说明如何修改默认交互的行为，tooltip 交互的原始的配置项是：
{
start: [{ trigger: 'plot:mousemove', action: 'tooltip:show' }],
end: [{ trigger: 'plot:mouseleave', action: 'tooltip:hide' }],
}我们可以修改 tooltip 的触发，改成点击绘图区域内部时显示 tooltip
chart.interaction('tooltip', {
start: [{ trigger: 'plot:click', action: 'tooltip:show' }],
});其中：
action 触发的反馈，可以是字符串也可以是数组，是所有内置和用户自定义的 Action，参考 交互反馈 Action 列表 。
除了 trigger 和 action 之外还有其他几个可选属性：
debounce: 延迟执行，有两个参数：
throttle 增加阈值，控制执行的频率
context 交互的上下文
交互的上下文提供了一系列进行判定条件的函数，帮助用户在 isEnable 中方便的判断，以上面 tooltip 的为示例，如果我们不使用 'plot:click' 事件而仅使用 'click' 事件时需要判定是否在绘图区域内判定：
chart.interaction('tooltip', {
start: [
trigger: 'click',
isEnable(context) {
return context.isInPlot();
action: 'tooltip:show',
});context 的接口定义如下：
/** 交互上下文的接口定义 */
export interface IInteractionContext {
* 当前触发的事件对象
event: Record<string, any>;
* 当前的 view
view: View;
/** 交互相关的 Actions */
actions: IAction[];
* 缓存属性，用于上下文传递信息
* @param key 键名
* @param value 值
cache(key: string, value?: any);
* 获取 action
* @param name - action 的名称
* @returns 指定 name 的 Action
getAction(name): IAction;
* 获取当前的点
* @returns 返回当前的点
getCurrentPoint(): Point;
* 获取当前的图形
getCurrentShape(): IShape;
* 添加 action
* @param action 指定交互 action
addAction(action: IAction);
* 移除 action
* @param action 移除的 action
removeAction(action: IAction);
* 事件触发时是否在 view 内部
isInPlot();
* 是否在组件的包围盒内
* @param name 组件名，可省略
isInComponent(name?: string);
* 是否在指定的图形内
* @param name shape 的名称
isInShape(name);
destroy();
所有的交互列表
G2 种的所有的交互都是通过 registerInteraction 方法注册的:
G2.registerInteraction(name, cfg);
我们用这个方法来说明各个交互，同时指出触发的对象和反馈的 Action
tooltip
控制 Tooltip 的显示隐藏，其定义：
// 注册 tooltip 的 interaction
registerInteraction('tooltip', {
start: [{ trigger: 'plot:mousemove', action: 'tooltip:show' }],
end: [{ trigger: 'plot:mouseleave', action: 'tooltip:hide' }],
});- 触发对象 plot，图表的绘图区域
- action 是 tooltip
active-region
鼠标在画布上移动时对应位置的分类出现背景框
// 出现背景框
registerInteraction('active-region', {
start: [{ trigger: 'plot:mousemove', action: 'active-region:show' }],
end: [{ trigger: 'plot:mouseleave', action: 'active-region:hide' }],
});
-
触发对象 plot，图表的绘图区域
-
action 是 active-region
