d3-zoomer

# d3-zoomer [![npm version][npm-image]][npm-url] [![npm downloads][downloads-image]][downloads-url] [![Build Status][travis-image]][travis-url] [![Dependencies Status][dependencies-image]][dependencies-url] [![DevDependencies Status][dev-dependencies-image]][dev-dependencies-url] [![Known Vulnerabilities][vulnerabilities-image]][vulnerabilities-url] A library to use d3-zoom easily. See how to use [d3-zoomer example](https://kimxogus.github.io/d3-zoomer). ## Installing - d3-zoomer is based on d3 version 4. - NPM ```bash npm install d3-zoomer ``` ```js var d3Zoomer = require('d3-zoomer'); ``` - Vanilla: Download [latest release](https://github.com/kimxogus/d3-zoomer/releases/latest). ```html <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](#targetClass) will be targeted. - When you call *zoomer* with *g*, [targetClass](#targetClass) will be added to the *g* elements and they will be targeted. ```js // Usage 1 var svg = d3.select('svg').call(zoomer); // Usage 2 var g = d3.select('svg').append('g').call(zoomer); ``` ## API Reference <a name="zoomer" href="#zoomer">#</a> d3.zoomer() [<>](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js "Source") Creates a new zoomer. <a name="targetClass" href="#targetClass">#</a> *zoomer*.targetClass([targetClass]) [<>](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L101 "Source") 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. <a name="target" href="#target">#</a> *zoomer*.target() [<>](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L110 "Source") Returns current targets(*g* elements with [targetClass](#targetClass)) <a name="scale" href="#scale">#</a> *zoomer*.scale([scale]) [<>](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L114 "Source") 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](#scaleRange) to [scaleDomain](#scaleDomain). <a name="scaleRange" href="#scaleRange">#</a> *zoomer*.scaleRange([scaleRange]) [<>](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L122 "Source") 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. <a name="scaleDomain" href="#scaleDomain">#</a> *zoomer*.scaleDomain([scaleDomain]) [<>](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L133 "Source") 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. <a name="on" href="#on">#</a> *zoomer*.on(typename[, callback]) [<>](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L143 "Source") 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](https://github.com/d3/d3-zoom#zoom_on) for details. <a name="transform" href="#transform">#</a> *zoomer*.transform([transform]) [<>](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L148 "Source") If *transform* is specified, apply the transform to [target](#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 ```js zoomer.transform({ x: 100 }); ``` If *transform* is not specified, current transform object([d3-zoom.zoomTransform](https://github.com/d3/d3-zoom#zoomTransform) object) will be returned. <a name="enabled" href="#enabled">#</a> *zoomer*.enabled([enabled]) [<>](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L175 "Source") Sets if zoom is enabled. If *enabled* is specified, zoom will be enabled(*true*) or disabled(*false*) as [d3-zoom.filter](https://github.com/d3/d3-zoom#zoom_filter). If not, it will return current *enabled* status of d3-zoom. [npm-image]: https://img.shields.io/npm/v/d3-zoomer.svg [npm-url]: https://npmjs.org/package/d3-zoomer [downloads-image]: https://img.shields.io/npm/dm/d3-zoomer.svg [downloads-url]: https://npmjs.org/package/d3-zoomer [travis-image]: https://travis-ci.org/kimxogus/d3-zoomer.svg [travis-url]: https://travis-ci.org/kimxogus/d3-zoomer [dependencies-image]: https://david-dm.org/kimxogus/d3-zoomer.svg [dependencies-url]: https://david-dm.org/kimxogus/d3-zoomer [dependencies-image]: https://david-dm.org/kimxogus/d3-zoomer/status.svg [dependencies-url]: https://david-dm.org/kimxogus/d3-zoomer [dev-dependencies-image]: https://david-dm.org/kimxogus/d3-zoomer/dev-status.svg [dev-dependencies-url]: https://david-dm.org/kimxogus/d3-zoomer?type=dev [vulnerabilities-image]: https://snyk.io/test/github/kimxogus/d3-zoomer/badge.svg [vulnerabilities-url]: https://snyk.io/test/github/kimxogus/d3-zoomer