2021SC@SDUSC“F2移动端可视化方案”源码分析（八）——Interaction交互机制的分析

2021SC@SDUSC 

目录

简介

使用方法

        引入交互模块

        调用

        清楚交互动作

饼状图的选中 

       使用

        API

        参数说明

柱状图的选中

        使用

        API

         参数说明

 图表平移

         使用

        API

        参数说明

图表的缩放

         

        使用

         API

        参数说明

附

---

简介

        F2提供了一套交互机制，用以达到通用的交互行为的封装和复用。经过代码分析和搜索论证后，暂时总结出以下四种通用的交互行为：

                1.饼状图的选中

                2.柱状图的选中

                3.图表平移

                4.图表缩放

        基于以上四种交互行为，我们可以在使用F2的时候，借用此机制来封装自己定义的交互行为。当然，要使用自己定义的自定义交互行为的方法并不在此文章中说明。

使用方法

        引入交互模块

        交互模块在F2中是默认没有被打包至 @antv/f2 模块包中的。所以在使用时需要我们手动引入，以下提供一种比较通用的引入代码段：

// 首先引入 F2
const F2 = require('@antv/f2/lib/index');

// 引入所有的交互行为
require('@antv/f2/lib/interaction/');

// 如果只需要引入其中一种交互行为，那么请使用如下的方式
// 引入 pie-select
require('@antv/f2/lib/interaction/pie-select');

// 引入 interval-select
require('@antv/f2/lib/interaction/interval-select');

// 引入 pan
require('@antv/f2/lib/interaction/pan');

// 引入 pinch
require('@antv/f2/lib/interaction/pinch');

        调用

        经过分析后，在此文中提供一种调用方法，代码段如下：

chart.interaction('name', config);

        这里的 ‘name’ 是指我们定义的 interaction 的名字。

        清楚交互动作

chart.clearInteraction()       
chart.clearInteraction('name') 

        第一种清除交互动作的方式是：清除 chart 实例上所具有的所有的交互动作；

        第二种清除交互动作的方式是：清除 chart 实例上名字为 ‘name’ 的交互动作。

饼状图的选中 

        

 动图来自AntV f2官方展示图片

       使用

        以下为调用代码段：

// 调用
chart.interaction('pie-select');

这里的 pie-select 是F2中的保留字，即我们要尽量在自定义变量中不去使用这个名字。

        API

chart.interaction('pie-select', {
  startEvent: {String}, // 触发事件，默认为 tap
  animate: {Boolean} || {Object}, // 动画配置
  offset: {Number}, // 光环偏移距离
  appendRadius: {Number}, // 光环大小
  style: {Object}, // 光环的样式配置
  cancelable: {Boolean}, // 是否允许取消选中，默认值为 true，表示允许
  onStart: {Function}, // 事件触发后的回调
  onEnd: {Function}, // 事件结束后的回调
  defaultSelected: {Object} // 设置默认选中的数据，该属性需要在 chart.render() 之后调用方可生效
});

        参数说明

参数	类型	默认值	说明
startEvent	String	‘tap’	此交互原则上是手指点击后触发的，所以还可以使用 ‘touchstart’。 选中交互的出发时间名称。
animate	Boolean/Object	false	动画配置，默认为 false ，可将该属性设置为 true 以打开动画。 类型为 Object 时，用于动画配置，详见上一篇文章。
offset	Number	1	选中后出现的光环与饼图之间的距离。
appendRadius	Number	8	选中后出现的光环的轴长。
style	Object	{ fillOpacity：0.5 }	设置光环的样式。
cancelable	Boolean	true	选中后是否可取消选中，默认为 true ，即可以再次点击以实现取消选中。
onStart	Function	null	事件触发后的回调，会调用设定的 Function 函数。 onStart( ev ) {}
onEnd	Function	null	事件结束后的回调，会调用设定的Function函数，进行相应操作。
defaultSelected	Object	null	用于设置初始化默认选中的数据，只需要传入我们选择的对应数据即可。

柱状图的选中

         

 动图来自AntV f2官方展示图片

        使用

        以下为调用代码段：

// 调用，尽量在 chart.render() 方法之后调用
chart.interaction('interval-select', {});

        API

chart.interaction('interval-select', {
  startEvent: {String}, // 触发事件，默认为 tap 事件
  selectStyle: {Object}, // 被选中图形的样式配置
  unSelectStyle: {Object}, // 未被选中图形的样式配置
  selectAxis: {Boolean}, // 是否高亮坐标轴文本
  selectAxisStyle: {Object}, // 坐标轴文本被选中后的样式
  cancelable: {Boolean}, // 是否允许取消选中，默认值为 true，表示允许
  onStart: {Function}, // 事件触发后的回调
  onEnd: {Function}, // 事件结束后的回调
  mode: {String}, // 选中策略，默认为 'shape', 即击中柱子才会触发交互
  defaultSelected: {Object} // 设置默认选中的数据，该属性需要在 chart.render() 之后调用方可生效
});

         参数说明

参数	类型	默认值	说明
startEvent	String	‘tap’	此交互原则上是手指点击后触发的，所以还可以使用 ‘touchstart’。 选中交互的出发时间名称。
selectStyle	Object	{ fillOpacity：1 }	用于设置被选中的柱的显示样式
unSelectStyle	Object	{ fillOpacity：0.4 }	用于设置未被选中的柱的显示样式
selectAxis	Boolean	true	是否为高亮的坐标轴文本，默认是，如不需要可自行选择关闭。
selectAxisStyle	Object	{ fontWeight：‘bold’ }	设置坐标轴文本高亮的样式。默认仅有文本加粗，可自行添加删减。
cancelable	Boolean	true	选中后是否可取消选中，默认为 true ，即可以再次点击以实现取消选中。
onStart	Function	null	事件触发后的回调，会调用设定的 Function 函数。 onStart( ev ) {}
onEnd	Function	null	事件结束后的回调，会调用设定的Function函数，进行相应操作。
mode	String	‘shape’	选中策略：默认值使得触摸到柱才会触发交互；另有可选值 'range' ，使得触摸位置落在柱的一定x方向范围内都会触发交互。
defaultSelected	Object	null	用于设置初始化默认选中的数据，只需要传入我们选择的对应数据即可。

 图表平移

        

动图来自AntV f2官方展示图片 

         使用

        以下是调用此交互动作的代码段：

// 调用，需要在 chart.render() 方法之前调用
chart.interaction('pan');

        API

chart.interaction('pan', {
  mode: {String}, // 图表平移的方向，默认为 'x'
  speed: {number}, // 用于控制分类类型或者 TimeCat 类型数据的平移速度
  step: {number}, // 用于控制分类类型或者 TimeCat 类型数据每次平移的数据条数
  panThreshold: {Number}, // hammer.js 设置，用于设置触发 pan 事件的最小移动距离
  pressThreshold: {Number}, // hammer.js 设置，用于设置触发 press 事件的设置
  pressTime: {Number}, // hammer.js 设置，用于设置触发 press 事件的最小时间差
  limitRange: {Object}, // 限制范围
  onStart: {Function}, // 事件触发后的回调
  onProcess: {Function}, // 事件进行中的回调
  onEnd: {Function} // 事件结束后的回调
});

        参数说明

参数	类型	默认值	说明
mode	String	‘x'	图表平移方向，可设置 x 轴、y 轴以及 x、y 两个方向的平移（ ’xy‘ ）。
speed	Number	5	平移速度，数值越大，速度越快， 仅适用于分类类型 'cat' 或者时间类型 'timeCat' 数据。
step	Number	1	控制每次平移的位移量，仅适用于分类类型 'cat' 或者时间类型 'timeCat' 数据。
panThreshold	Number	10	识别 pan 即平移事件的最小移动距离。
pressThreshold	Number	9	识别 press 即点击事件的最小移动距离。
pressTime	Number	251	识别 press 事件的最小时间差，长按会触发 tooltip。这一点跟之前文章里面分析过的机制类似。
limitRange	Object	{}	设置图表平移的最大最小范围。
onStart	Function	null	事件触发后的回调，会调用设定的 Function 函数。 onStart( ev ) {}
onProcess	Function	null	事件进行中的回调，会调用设定的Function函数。 onProcess( ev ) {}
onEnd	Function	null	事件结束后的回调，会调用设定的Function函数，进行相应操作。

图表的缩放

         

 动图来自AntV f2官方展示图片 

        使用

        以下为调用代码段：

// 调用，需要在 chart.render() 方法之前调用
chart.interaction('pinch');

         API

chart.interaction('pinch', {
  mode: {String}, // 图表平移的方向，默认为 'x'
  sensitivity: {Number}, // 用于控制分类类型数据的缩放灵敏度
  minScale: {Number}, // 缩小的最小倍数
  maxScale: {Number}, // 放大的最大倍数
  onStart: {Function}, // 事件触发后的回调
  onProcess: {Function}, // 事件进行中的回调
  onEnd: {Function}, // 事件结束后的回调
  pressThreshold: 9, // hammer.js 设置，用于设置触发 press 事件的设置
  pressTime: 251 // hammer.js 设置，用于设置触发 press 事件的最小时间差
});

        参数说明

参数	类型	默认值	说明
mode	String	‘x'	图表平移方向，可设置 x 轴、y 轴以及 x、y 两个方向的缩放（ ’xy‘ ）。
sensitivity	Number	1	控制缩放灵敏度，越小越灵敏，仅适用于分类类型 'cat' 或者时间类型 'timeCat' 数据。
minScale	Number	linear：null 分类类型、TimeCat：1	设置图表缩放的最小倍数。
maxScale	Number	linear：null 分类类型、TimeCat：4	设置图标放大的最大倍数。
onStart	Function	null	事件触发后的回调，会调用设定的 Function 函数。 onStart( ev ) {}
onProcess	Function	null	事件进行中的回调，会调用设定的Function函数。 onProcess( ev ) {}
onEnd	Function	null	事件结束后的回调，会调用设定的Function函数，进行相应操作。
pressThreshold	Number	9	识别 press 即点击事件的最小移动距离。
pressTime	Number	251	识别 press 事件的最小时间差，长按会触发 tooltip。这一点跟之前文章里面分析过的机制类似。

附

        本文所涉及到的内容完全根据 F2 在 gitHub 中开放的源码分析所得，其中可能会有很多信息并不完整，因此在使用方面还需要进一步搜索查证试验之后再使用更好。

        同时，随着分析工作的推进，文章内容与动画机制越来越没关系，之所以有这样的情况，是因为我们在分析源码的过程中，会自然而然地发现动画机制的代码并不是孤立的存在（其他部分亦然）因此在分析过程中，我们会将所涉及到的一些感觉有必要的代码进行分析。