鼠标高亮图形

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

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

交互行为	示例	Action
单个图形元素高亮		element-highlight
多个图形元素高亮		element-highlight
根据颜色高亮图形元素		element-highlight-by-color
高亮群组图形元素		element-highlight-by-x

交互语法概览

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，可直接体验、编辑本篇所有示例。