G2 提供一套交互机制，以达到通用交互行为的封装和复用。基于此机制，我们默认提供了以下交互行为：

  1. Slider 滑块
  2. Zoom 图表缩放
  3. Drag 拖拽
  4. Brush 框选

Slider 滑块

Demo: https://antv.alipay.com/zh-cn/g2/3.x/demo/candlestick/basic.html
basic-407c2.png

API

  1. chart.interact('slider', {
  2.   container, // DOM id
  3.   startRadio, // number，滑块的起始范围，0 到 1 的数据范围
  4.   endRadio, // number, 滑块的结束范围，0 到 1 的数据范围
  5.   data, // 源数据
  6.   xAxis, // 背景图的横轴对应字段，同时为数据筛选的字段
  7.   yAxis, // 背景图的纵轴对应字段，同时为数据筛选的字段
  8.   scales, // 配置背景图坐标轴的度量类型
  9.   onChange, // 回调函数，用于控制滑块滑动过程中的各种操作
  10.   height, // 滑块高度
  11.   width, // 滑块宽度，默认自适应
  12.   padding, // 图表的 padding，用于控制滑块的显示距离，用法同 chart 的 padding 一致
  13.   fillerStyle: {
  14.     fill: '#BDCCED',
  15.     fillOpacity: 0.3
  16.   }, // 滑块选中区域的样式
  17.   backgroundStyle: {
  18.     stroke: '#CCD6EC',
  19.     fill: '#CCD6EC',
  20.     fillOpacity: 0.3,
  21.     lineWidth: 1
  22.   }, // 滑块背景样式
  23.   layout: 'horizontal', // 滑块的布局，'horizontal' 或者 'vertical'
  24.   textStyle: {
  25.     fill: '#545454'
  26.   }, // 文本样式
  27.   handleStyle: {
  28.     img: 'https://gw.alipayobjects.com/zos/rmsportal/QXtfhORGlDuRvLXFzpsQ.png',
  29.     width: 5
  30.   }, // 滑块控制器的样式
  31.   backgroundChart: {
  32.     type: [ 'area' ], // 图表的类型，可以是字符串也可是是数组
  33.     color: '#CCD6EC'
  34.   } // 背景图表的配置，如果为 false 则表示不渲染
  35. });

Zoom 缩放

Demo: https://antv.alipay.com/zh-cn/g2/3.x/demo/other/zoom-scatter.html#
1542262785863-e267eec2-3929-4664-badf-56bfdb82ca90.gif

API

  1. chart.interact('zoom', {
  2.   type: 'X' | 'Y' | 'XY', // 设置缩放的类型，'X' x 轴方向缩放, 'Y' y 轴方向缩放, 'XY' x 和 y 轴同时缩放
  3.   stepRatio: number, // 控制缩放速度，默认值 0.05
  4.   minScale: number, // 最小缩放比例，默认值 1
  5.   maxScale: number, // 最大缩放比例，默认值 4
  6.   catStep: number // 分类数据的缩放速度，默认值 2
  7. });

Drag 拖拽

Demo: https://antv.alipay.com/zh-cn/g2/3.x/demo/other/zoom-scatter.html#

API

  1. chart.interact('drag', {
  2.   type: 'X' | 'Y' | 'XY', // 设置拖拽的方向，'X' x 轴方向, 'Y' y 轴方向, 'XY' x 和 y 轴同时拖拽
  3.   stepRatio: number, // 用于控制拖拽速度，默认为 0.05
  4. });

Brush 框选

Demo: https://antv.alipay.com/zh-cn/g2/3.x/demo/other/brush-filter-shape.html

1542263223024-3472f33a-ea52-482b-bff7-797f62b5665c.gif

其他 Demo:

API

  1. chart.interact('brush', {
  2.   type: 'X' | 'Y' | 'XY' | 'POLYGON', // 设置框选的类型，默认为 'XY'
  3.   draggable: boolean, // 框选框是否允许拖拽，默认为 false
  4.   inPlot: boolean, // 是否将框选范围限制在绘图区域内，默认为 true
  5.   style: object, // 设置选择框的绘图属性样式
  6.   filter: boolean, // 框选结束后是否对数据进行过滤，，默认为 false
  7.   xField: string, // 设置 X 值对应的字段名
  8.   yField: string, // 设置 Y 轴对应的字段名
  9.   onStart: function, // 交互触发的回调
  10.   onEnd: function, // 交互结束的回调
  11.   onBrushstart: function, // 框选开始时的钩子
  12.   onBrushmove: function, // 框选过程中的钩子
  13.   onBrushend: function, // 框选结束时的钩子
  14.   onDragstart: function, // 拖拽开始时的钩子
  15.   onDragmove: function, // 拖拽过程中的钩子
  16.   onDragend: function, // 拖拽结束时的钩子
  17. });