阅读 256

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