G2 交互语法之鼠标高亮图形

G2 从 4.0 开始，将全部的交互行为使用全新的交互语法实现，而且再也不默认内置，须要用户显式调用 chart.interaction() 接口。为了帮助你们更好地理解、使用交互语法，咱们将会推出交互语法专题。

本文介绍的是最多见的交互图形高亮（highlight，突出当前被聚焦的图形元素，其余图形元素变暗）中的一种，经过鼠标高亮图形，除了鼠标外，咱们还能够经过关联的组件高亮图形，经过框选交互高亮图形，这些都会将在后续章节向你们详细介绍。

交互语法概览

G2 的交互语法，是将交互拆解成多个环节，每一个环节由触发和反馈组成。只要你能将交互用天然语言的方式描述出来，就可使用 G2 的交互语法进行组合搭建出交互行为。在这里咱们再一块儿温习下 G2 交互语法中对于交互环节的定义，更详细的内容能够阅读可视化交互语法。

G2 将每个交互环节拆解成如下步骤:

• showEnable 示能：表示交互能够进行；
• start 开始：交互开始；
• processing 持续：交互持续；
• end 结束：交互结束；
• rollback 回滚：取消交互，恢复到原始状态；

下面咱们就开始鼠标高亮图形的交互语法组装吧，为了帮助你们理解，每一个交互行为咱们都会以天然语言 + 交互语法的形式向你们阐述。咱们以柱状图的高亮为例，实现交互的过程当中咱们会使用 G2 内置的 Action，Action 的定义和列表参考 G2 配置交互。

单个图形元素高亮

柱状图，单个图形元素高亮交互效果，demo 地址：连接

交互的语言描述

1. 鼠标移动到图形元素上，触发图形元素的高亮效果（移动到的图形变亮，其余图形变暗）；
2. 鼠标从图形元素上移出，图形元素的高亮效果消失。

G2 交互语法

registerInteraction('element-highlight', {
  start: [{ trigger: 'element:mouseenter', action: 'element-highlight:highlight' }],
  end: [{ trigger: 'element:mouseleave', action: 'element-highlight:reset' }],
});
复制代码

咱们使用了 'element-highlight' Action[3]，同时咱们用到了两个方法：

• highlight: 高亮图形；
• reset：恢复受影响的图形。

交互语法解释：

• 当鼠标 mouseenter 进入 element（图表的图形）时，触发 element-highlight 的 highlight 方法；
• 当鼠标 mouseleave 离开 element 时，触发 element-highlight 的 reset 方法。

咱们还能够将交互行为应用到其余图表上，如（但不限于）面积图。

层叠面积图，单个图形元素高亮交互效果，demo 地址：连接

多个图形元素高亮

柱状图，多个图形元素高亮交互效果

咱们也能够经过上面的 Action 实现多个图形的高亮，咱们依然首先用天然语言来描述交互，而后用交互语法进行组装。

交互的语言描述

• 鼠标移动到图形元素上，触发图形元素的高亮效果
• 双击画布，清除全部高亮的图形

咱们看到这个交互同上面交互的差异在于不处理鼠标移出，而经过双击清理全部图形的高亮效果。

G2 交互语法

registerInteraction('element-highlight', {
  start: [{ trigger: 'element:mouseenter', action: 'element-highlight:highlight' }],
  rollback: [{ trigger: 'dblclick', action: 'element-highlight:clear' }],
});
复制代码

咱们用了 'element-highlight' Action 的两个方法：

• highlight: 高亮图形
• clear: 清理全部图形的高亮

咱们还能够将交互行为应用到其余图表上。

色块图，多个图形元素高亮交互效果

根据颜色高亮图形元素

层叠柱状图，根据颜色高亮图形元素交互效果 1，demo 地址：连接

交互的语言描述

1. 鼠标移动到图形上，全部同当前图表同一个颜色的图形高亮
2. 鼠标从图形上移出，对应图形的高亮效果消失

G2 交互语法

registerInteraction('element-highlight-by-color', {
  start: [{ trigger: 'element:mouseenter', action: 'element-highlight-by-color:highlight' }],
  end: [{ trigger: 'element:mouseleave', action: 'element-highlight-by-color:reset' }],
});
复制代码

同上面的交互相似，只是咱们换了另外一个内置的交互 Action：'element-highlight-by-color'，其方法同 'element-highlight'。

为了起到更好的关联、强调做用，咱们还能够改变高亮的反馈形态：在图形高亮的同时，把全部相同颜色的的图形链接起来，以下图所示。

层叠柱状图，根据颜色高亮图形元素交互效果 2，demo 地址：连接

这些图形的链接也是用交互语法组合而成的：

registerInteraction('interval-link', {
  start: [{trigger: 'interval:mouseenter', action: 'element-link-by-color:link'}],
  end: [{trigger: 'interval:mouseleave', action: 'element-link-by-color:unlink'}]
});
复制代码

咱们还能够将交互行为应用到其余图表上。

散点图，根据颜色高亮图形元素交互效果 1

高亮群组图形元素

高亮群组图形元素交互效果，demo 地址：连接

交互的语言描述

1. 鼠标移动到图形元素上，全部同当前图表同一个群组的图形元素高亮
2. 鼠标从图形元素上移出，对应图形元素的高亮效果消失

G2 交互语法

registerInteraction('element-highlight-by-x', {
  start: [{ trigger: 'element:mouseenter', action: 'element-highlight-by-x:highlight' }],
  end: [{ trigger: 'element:mouseleave', action: 'element-highlight-by-x:reset' }],
});
复制代码

同上面的交互相似，只是咱们换了另外一个内置的交互：'element-highlight-by-x'，其方法同 element-highlight。

咱们还能够将交互行为应用到其余图表上。

色块图，高亮群组图形元素交互效果

总结

从这篇文章中你能够看到交互语法的灵活，能够自由地对触发的事件和反馈 Action 进行组装，目前咱们已经内置了 30+ 种 Action，也在源源不断地添加新的 Action，但愿 G2 4.0 能让你再也不为可视化过程当中的交互而烦恼。后面咱们还会经过更多更复杂的交互实例来向你们介绍交互语法，帮助你们认识到交互语法的完备性，同时也帮助你们更容易地配置出高质量的交互。

参考资料

1. 可视化交互语法
2. G2 内置交互反馈
3. element-highlight
4. element-highlight-color
5. element-highlight-x

🥰🥰🥰舒适提示：也能够直接访问 Observable，可直接体验、编辑本篇全部示例。