d3-zoomer

A library to use d3-zoom easily.

See how to use d3-zoomer example.

Installing

• d3-zoomer is based on d3 version 4.

• NPM

npm install d3-zoomer

var d3Zoomer = require('d3-zoomer');

• Vanilla: Download latest release.

<script src="path/to/d3.min.js"></script>
<script src="path/to/d3-zoomer.min.js"></script>
<script>
 
var zoomer = d3.zoomer();
 
</script> 

Usage

• You can call zoomer with svg or g which is child of svg. Zoomer will add class name to target g elements, and those target elements will be zoomed and panned.
• When you call zoomer with svg, only g elements with targetClass will be targeted.
• When you call zoomer with g, targetClass will be added to the g elements and they will be targeted.

// Usage 1
var svg = d3.select('svg').call(zoomer);
 
// Usage 2
var g = d3.select('svg').append('g').call(zoomer);

API Reference

# d3.zoomer() <>

Creates a new zoomer.

# zoomer.targetClass([targetClass]) <>

Sets target class name('pan-zoom' by default) to be zoomed and panned. Zoomer will select all g classed with targetClass. If there are no g with targetClass, Zoomer will create a new g with targetClass.

If targetClass is not specified, current targetClass will be returned.

# zoomer.target() <>

Returns current targets(g elements with targetClass)

# zoomer.scale([scale]) <>

ScaleTo function. If scale is not specified, current scale will be returned.

scale of this function is not the scale of transform attribute. It's translated value from scaleRange to scaleDomain.

# zoomer.scaleRange([scaleRange]) <>

Sets scaleRange with specified array of numbers [k0, k1], which [0.1, 2] by default, where k0 is lower limit of actual scale of transform and k1 is upper limit.

If scaleRange is not specified, current scaleRange will be returned.

# zoomer.scaleDomain([scaleDomain]) <>

Sets scaleDomain with specified array of numbers [k0, k1], which [0.1, 2] by default, where k0 is translated scale of lower limit of scaleRange and k1 is translated scale of upper limit.

If scaleDomain is not specified, current scaleDomain will be returned.

# zoomer.on(typename[, callback]) <>

If callback is specified, register event listener for typename. If not, currently registered callback for typename will be returned. Available typenames are as follows.

• start: after zooming begins.
• zoom: after a change to the zoom transform.
• end: after zooming ends.

See d3-zoom.on for details.

# zoomer.transform([transform]) <>

If transform is specified, apply the transform to target. To apply transform, transform should be an object with properties of x, y and k. You can specify only one or two of those properties like

zoomer.transform({
  x: 100
});

If transform is not specified, current transform object(d3-zoom.zoomTransform object) will be returned.

# zoomer.enabled([enabled]) <>

Sets if zoom is enabled. If enabled is specified, zoom will be enabled(true) or disabled(false) as d3-zoom.filter. If not, it will return current enabled status of d3-zoom.