Pinch

Based on pinch gesture( from Hammer.js), it also provides press gesture to trigger the interaction of the tooltip.

How to use

const F2 = require('@antv/f2/lib/index'); // require F2
require('@antv/f2/lib/interaction/pinch'); // require the interaction

// ... create a chart instance

// call the interaction, should be call before chart.render()
chart.interaction('pinch');

Configuration options

chart.interaction('pinch', {
  mode: {String}, 
  minScale: {Number}, 
  maxScale: {Number},
  pressThreshold: {Number},
  pressTime: {Object},
  onStart: {Function},
  onProcess: {Function},
  onEnd: {Function}
});

Name

Type

Default

Description

mode

String

'x'

The direction of pinch, can be 'x', 'y' or 'xy'. The default value is 'x'.

minScale

Number

1 or null

Set the minimum scale. Linear data default value is 1, cat or timeCat data default value is null.

maxScale

Number

4 or null

Set the maximum scale. Linear data default value is 4, cat or timeCat data default value is null.

pressThreshold

Number

9

Minimal movement that is allowed while pressing. Press will trigger tooltip.

pressTime

Number

251

Minimal press time in ms.

onStart

Function

null

The callback after the start event is triggered.

onPress

Function

null

The callback after the process event is triggered.

onEnd

Function

null

The callback after the end event is triggered.

Demo

PreviousPanNextScrollBar

Last updated