d3-zoomable
This reusable component provides an easy way to make DOM elements zoomable/pannable using mouse wheel/drag events. It is mostly a convenience wrapper around d3-zoom functionality which hides away some of the complexity and provides easy access to common use cases.
Supports zooming svg (via transform attribute), canvas (via context transform) or even plain html DOM elements (via transform style).
Check out the examples:
Quick start
import zoomable from 'd3-zoomable';or using a script tag
<script src="//unpkg.com/d3-zoomable"></script>then
const myZoom = zoomable();
myZoom(<DOM element to capture mouse events>)
.svgEl(<SVG element to transform>);API reference
| Method | Description | Default |
|---|---|---|
| htmlEl([node, d3-selection or array]) | Getter/setter for the HTML DOM element to control using the transform style property. Also accepts a list of elements by passing an array. |
|
| svgEl([node, d3-selection or array]) | Getter/setter for the SVG DOM element to control using the transform attribute. Also accepts a list of elements by passing an array. |
|
| canvasEl([node, d3-selection or array]) | Getter/setter for the Canvas DOM element to control using context transform operations. Also accepts a list of elements by passing an array. | |
| enableX([bool]) | Getter/setter for whether to enable zooming along the X axis. | true |
| enableY([bool]) | Getter/setter for whether to enable zooming along the Y axis. | true |
| scaleExtent([[number, number]]) | Getter/setter for the zoom limits to enforce, similar to d3-zoom scaleExtent. | [1, ∞] |
| translateExtent([[[number, number], [number, number]]]) | Getter/setter for the pan limits to enforce, similar to d3-zoom translateExtent. | [[-∞, -∞], [+∞, +∞]] |
| current() | Getter for the current transform settings, in { x, y, k } syntax. |
|
| zoomBy(number[, duration]) | Programmatically adjust the zoom scale by a certain amount. Optionally set a transition duration (in ms) to animate the transformation. |
|
| zoomReset([duration]) | Programmatically reset the zoom to its initial setting ({ x: 0, y: 0, k: 1 }). Optionally set a transition duration (in ms) to animate the transformation. |
|
| zoomTo({ x, y, k } [, duration]) | Programmatically apply a certain zoom setting, defined by the x, y translation, and the k scaling. Optionally set a transition duration (in ms) to animate the transformation. |
|
| onChange(fn(newTransform, previousTransform, duration)) | Callback function invoked whenever the zoom settings change, either by user interaction of programmatically. The callback arguments include the new transform ({ x, y, k } syntax), the previous transform, and the duration of the zoom (in ms) in the case of programmatic requests. |