d3-zoomer
v1.0.5
Published
A library for easy pan-zoom behavior of d3
Downloads
12
Maintainers
Readme
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.