{"id":18432359,"url":"https://github.com/kimxogus/d3-zoomer","last_synced_at":"2025-04-07T18:33:43.371Z","repository":{"id":57211333,"uuid":"74196647","full_name":"kimxogus/d3-zoomer","owner":"kimxogus","description":"A library to use d3-zoom easily.","archived":false,"fork":false,"pushed_at":"2019-05-03T12:43:15.000Z","size":51,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-11T00:03:04.703Z","etag":null,"topics":["d3","pan-and-zoom","zoom","zoom-behavior","zoomer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kimxogus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-19T08:28:48.000Z","updated_at":"2019-05-03T12:43:16.000Z","dependencies_parsed_at":"2022-08-30T12:30:19.768Z","dependency_job_id":null,"html_url":"https://github.com/kimxogus/d3-zoomer","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimxogus%2Fd3-zoomer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimxogus%2Fd3-zoomer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimxogus%2Fd3-zoomer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimxogus%2Fd3-zoomer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimxogus","download_url":"https://codeload.github.com/kimxogus/d3-zoomer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223289489,"owners_count":17120662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3","pan-and-zoom","zoom","zoom-behavior","zoomer"],"created_at":"2024-11-06T05:28:19.868Z","updated_at":"2024-11-06T05:28:20.484Z","avatar_url":"https://github.com/kimxogus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3-zoomer\n\n[![npm version][npm-image]][npm-url]\n[![npm downloads][downloads-image]][downloads-url]\n[![Build Status][travis-image]][travis-url]\n[![Dependencies Status][dependencies-image]][dependencies-url]\n[![DevDependencies Status][dev-dependencies-image]][dev-dependencies-url]\n[![Known Vulnerabilities][vulnerabilities-image]][vulnerabilities-url]\n\nA library to use d3-zoom easily.\n\nSee how to use [d3-zoomer example](https://kimxogus.github.io/d3-zoomer).\n\n## Installing\n- d3-zoomer is based on d3 version 4.\n\n- NPM\n```bash\nnpm install d3-zoomer\n```\n```js\nvar d3Zoomer = require('d3-zoomer');\n```\n\n- Vanilla: Download\n[latest release](https://github.com/kimxogus/d3-zoomer/releases/latest).\n\n```html\n\u003cscript src=\"path/to/d3.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/d3-zoomer.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\nvar zoomer = d3.zoomer();\n\n\u003c/script\u003e\n```\n\n## Usage\n- 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.\n- When you call *zoomer* with *svg*, only *g* elements with [targetClass](#targetClass) will be targeted.\n- When you call *zoomer* with *g*, [targetClass](#targetClass) will be added to the *g* elements and they will be targeted.\n\n```js\n// Usage 1\nvar svg = d3.select('svg').call(zoomer);\n\n// Usage 2\nvar g = d3.select('svg').append('g').call(zoomer);\n```\n\n## API Reference\n\n\u003ca name=\"zoomer\" href=\"#zoomer\"\u003e#\u003c/a\u003e d3.\u003cb\u003ezoomer\u003c/b\u003e() [\u003c\u003e](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js \"Source\")\n\nCreates a new zoomer.\n\n\u003ca name=\"targetClass\" href=\"#targetClass\"\u003e#\u003c/a\u003e *zoomer*.\u003cb\u003etargetClass\u003c/b\u003e([\u003ci\u003etargetClass\u003c/i\u003e]) [\u003c\u003e](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L101 \"Source\")\n\nSets 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*.\n\nIf *targetClass* is not specified, current *targetClass* will be returned.\n\n\u003ca name=\"target\" href=\"#target\"\u003e#\u003c/a\u003e *zoomer*.\u003cb\u003etarget\u003c/b\u003e() [\u003c\u003e](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L110 \"Source\")\n\nReturns current targets(*g* elements with [targetClass](#targetClass))\n\n\u003ca name=\"scale\" href=\"#scale\"\u003e#\u003c/a\u003e *zoomer*.\u003cb\u003escale\u003c/b\u003e([\u003ci\u003escale\u003c/i\u003e]) [\u003c\u003e](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L114 \"Source\")\n\nScaleTo function. If *scale* is not specified, current scale will be returned.\n\n*scale* of this function is not the scale of transform attribute. It's translated value from [scaleRange](#scaleRange) to [scaleDomain](#scaleDomain).\n\n\u003ca name=\"scaleRange\" href=\"#scaleRange\"\u003e#\u003c/a\u003e *zoomer*.\u003cb\u003escaleRange\u003c/b\u003e([\u003ci\u003escaleRange\u003c/i\u003e]) [\u003c\u003e](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L122 \"Source\")\n\nSets 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.\n\nIf *scaleRange* is not specified, current *scaleRange* will be returned.\n\n\u003ca name=\"scaleDomain\" href=\"#scaleDomain\"\u003e#\u003c/a\u003e *zoomer*.\u003cb\u003escaleDomain\u003c/b\u003e([\u003ci\u003escaleDomain\u003c/i\u003e]) [\u003c\u003e](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L133 \"Source\")\n\nSets 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.\n\nIf *scaleDomain* is not specified, current *scaleDomain* will be returned.\n\n\u003ca name=\"on\" href=\"#on\"\u003e#\u003c/a\u003e *zoomer*.\u003cb\u003eon\u003c/b\u003e(\u003ci\u003etypename\u003c/i\u003e[, \u003ci\u003ecallback\u003c/i\u003e]) [\u003c\u003e](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L143 \"Source\")\n\nIf *callback* is specified, register event listener for *typename*. If not, currently registered *callback* for *typename* will be returned.\nAvailable *typenames* are as follows.\n\n- ```start```: after zooming begins.\n- ```zoom```: after a change to the zoom transform.\n- ```end```: after zooming ends.\n\nSee [d3-zoom.on](https://github.com/d3/d3-zoom#zoom_on) for details.\n\n\u003ca name=\"transform\" href=\"#transform\"\u003e#\u003c/a\u003e *zoomer*.\u003cb\u003etransform\u003c/b\u003e([\u003ci\u003etransform\u003c/i\u003e]) [\u003c\u003e](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L148 \"Source\")\n\nIf *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\n```js\nzoomer.transform({\n  x: 100\n});\n```\n\nIf *transform* is not specified, current transform object([d3-zoom.zoomTransform](https://github.com/d3/d3-zoom#zoomTransform) object) will be returned.\n\n\u003ca name=\"enabled\" href=\"#enabled\"\u003e#\u003c/a\u003e *zoomer*.\u003cb\u003eenabled\u003c/b\u003e([\u003ci\u003eenabled\u003c/i\u003e]) [\u003c\u003e](https://github.com/kimxogus/d3-zoomer/blob/master/src/index.js#L175 \"Source\")\n\nSets 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).\nIf not, it will return current *enabled* status of d3-zoom.\n\n[npm-image]: https://img.shields.io/npm/v/d3-zoomer.svg\n[npm-url]: https://npmjs.org/package/d3-zoomer\n[downloads-image]: https://img.shields.io/npm/dm/d3-zoomer.svg\n[downloads-url]: https://npmjs.org/package/d3-zoomer\n[travis-image]: https://travis-ci.org/kimxogus/d3-zoomer.svg\n[travis-url]: https://travis-ci.org/kimxogus/d3-zoomer\n[dependencies-image]: https://david-dm.org/kimxogus/d3-zoomer.svg\n[dependencies-url]: https://david-dm.org/kimxogus/d3-zoomer\n[dependencies-image]: https://david-dm.org/kimxogus/d3-zoomer/status.svg\n[dependencies-url]: https://david-dm.org/kimxogus/d3-zoomer\n[dev-dependencies-image]: https://david-dm.org/kimxogus/d3-zoomer/dev-status.svg\n[dev-dependencies-url]: https://david-dm.org/kimxogus/d3-zoomer?type=dev\n[vulnerabilities-image]: https://snyk.io/test/github/kimxogus/d3-zoomer/badge.svg\n[vulnerabilities-url]: https://snyk.io/test/github/kimxogus/d3-zoomer\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimxogus%2Fd3-zoomer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimxogus%2Fd3-zoomer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimxogus%2Fd3-zoomer/lists"}