Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kimxogus/d3-zoomer

A library to use d3-zoom easily.
https://github.com/kimxogus/d3-zoomer

d3 pan-and-zoom zoom zoom-behavior zoomer

Last synced: about 2 months ago
JSON representation

A library to use d3-zoom easily.

Awesome Lists containing this project

README 

        
# 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



var zoomer = d3.zoomer();



```



## 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



# d3.zoomer() [<>](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js "Source")



Creates a new zoomer.



# *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.



# *zoomer*.target() [<>](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L110 "Source")



Returns current targets(*g* elements with [targetClass](#targetClass))



# *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).



# *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.



# *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.



# *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.



# *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.



# *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