Data utilities
Umbrella package
@visx/Zoom
@visx/zoom
provides react
components that make it easy to apply transforms to a viewport or
chart.
Installation
npm install --save @visx/zoom
Examples
<Zoom />
APIs
#<Zoom />
Height of the zoom container.
Width of the zoom container.
(transform: TransformMatrix, prevTransform: TransformMatrix) => TransformMatrix
By default constrain() will only constrain scale values. To change constraints you can pass in your own constrain function as a prop.
For example, if you wanted to constrain your view to within [0, 0, width, height]:
function constrain(transformMatrix, prevTransformMatrix) {
const min = applyMatrixToPoint(transformMatrix, { x: 0, y: 0 });
const max = applyMatrixToPoint(transformMatrix, { x: width, y: height });
if (max.x < width || max.y < height) {
return prevTransformMatrix;
}
if (min.x > 0 || min.y > 0) {
return prevTransformMatrix;
}
return transformMatrix;
}
TransformMatrix
Initial transform matrix to apply.
PinchDelta
pinchDelta(state)
A function that returns { scaleX, scaleY, point } factors to scale the matrix by. Scale factors greater than 1 will increase (zoom in), less than 1 will decrease (zoom out), the point is used to find where to zoom. The state parameter is from react-use-gestures onPinch handler
number
Maximum x scale value for transform.
number
Minimum x scale value for transform.
Default 0
number
Maximum y scale value for transform.
number
Minimum y scale value for transform.
Default 0
(event: WheelEvent | React.WheelEvent<Element>) => Pick<TransformMatrix, "scaleX" | "scaleY">
wheelDelta(event)
A function that returns { scaleX,scaleY } factors to scale the matrix by. Scale factors greater than 1 will increase (zoom in), less than 1 will decrease (zoom out).