Interaction

Search…
Interaction
F2 provides an interaction mechanism to achieve the encapsulation and reuse of common interaction behavior. Based on this mechanism, we provide the following four common interactions:
Interaction
Demo
Selection for pie chart
​
​
Selection for bar chart
​
​
Pan
​
​
Pinch
​
​
For developers, they can encapsulate their own interaction behavior based on this mechanism. For details, see the Custom Interaction Behavior(todo).
Usage
For better package size, interaction mode is not packaged by default into @antv/f2. So we should require it.
1
// import F2
2
const F2 = require('@antv/f2/lib/index');
3
​
4
// import all interations we provide
5
require('@antv/f2/lib/interaction/');
6
​
7
// If you just want to use one
8
​
9
// import pie chart selection interaction
10
require('@antv/f2/lib/interaction/pie-select');
11
​
12
// import bar chart selection interaction
13
require('@antv/f2/lib/interaction/interval-select');
14
​
15
// import pan interaction
16
require('@antv/f2/lib/interaction/pan');
17
​
18
// import pinch interaction
19
require('@antv/f2/lib/interaction/pinch');
Copied!
The touch gestures for interactions all base on Hammer.js.
call interaction
1
chart.interaction('name', config);
Copied!
clear interaction
1
chart.clearInteraction()       // clear all interactions for current chart instance
2
chart.clearInteraction('name') // clear the interaction whose name is 'name'
Copied!
Animate
Selection for Pie Chart
Last modified 3yr ago
Copy link
Contents
Usage