vasturiano / d3-zoomable

Easy way to apply d3-zoom functionality to DOM elements

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:

• HTML (source)
• SVG (source)
• Canvas (source)

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.

d3-zoomable's Issues

How to unzoom using the zoomBy method?

This library, like all of @vasturiano projects, is fabulous. I have a project where I use it to zoom in a dataviz with a + and a - button. I thought I could use the zoomBy method to zoom in but also zoom out but I see that it doesn't work as I assumed. If I do for example zoomBy(10) and then zoomBy(-5) I see that the zoom is in fact reset. But when I zoomBy(10) twice it is cumulative.

I don't know if my question is clear.
Do you have any idea if it would be possible?