https://github.com/vasturiano/d3-zoomable
Easy way to apply d3-zoom functionality to DOM elements
https://github.com/vasturiano/d3-zoomable
canvas d3 data-visualization svg zooming
Last synced: 3 months ago
JSON representation
Easy way to apply d3-zoom functionality to DOM elements
- Host: GitHub
- URL: https://github.com/vasturiano/d3-zoomable
- Owner: vasturiano
- License: mit
- Created: 2019-06-14T05:48:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-09T19:52:53.000Z (6 months ago)
- Last Synced: 2025-07-14T22:22:08.884Z (3 months ago)
- Topics: canvas, d3, data-visualization, svg, zooming
- Language: JavaScript
- Homepage: https://vasturiano.github.io/d3-zoomable/example/svg/
- Size: 248 KB
- Stars: 7
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
d3-zoomable
==================
[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
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](https://github.com/d3/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:
* [HTML](https://vasturiano.github.io/d3-zoomable/example/html/) ([source](https://github.com/vasturiano/d3-zoomable/blob/master/example/html/index.html))
* [SVG](https://vasturiano.github.io/d3-zoomable/example/svg/) ([source](https://github.com/vasturiano/d3-zoomable/blob/master/example/svg/index.html))
* [Canvas](https://vasturiano.github.io/d3-zoomable/example/canvas/) ([source](https://github.com/vasturiano/d3-zoomable/blob/master/example/canvas/index.html))
## Quick start
```js
import zoomable from 'd3-zoomable';
```
or using a *script* tag
```html
```
then
```js
const myZoom = new zoomable()
.svgEl();
```
## 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](https://github.com/d3/d3-zoom#zoom_scaleExtent). | `[1, ∞]` |
| translateExtent([[[number, number], [number, number]]]) | Getter/setter for the pan limits to enforce, similar to [d3-zoom translateExtent](https://github.com/d3/d3-zoom#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. | |
[npm-img]: https://img.shields.io/npm/v/d3-zoomable
[npm-url]: https://npmjs.org/package/d3-zoomable
[build-size-img]: https://img.shields.io/bundlephobia/minzip/d3-zoomable
[build-size-url]: https://bundlephobia.com/result?p=d3-zoomable
[npm-downloads-img]: https://img.shields.io/npm/dt/d3-zoomable
[npm-downloads-url]: https://www.npmtrends.com/d3-zoomable