{"id":29751765,"url":"https://github.com/vasturiano/d3-zoomable","last_synced_at":"2025-07-26T14:42:14.449Z","repository":{"id":34932120,"uuid":"191883019","full_name":"vasturiano/d3-zoomable","owner":"vasturiano","description":"Easy way to apply d3-zoom functionality to DOM elements","archived":false,"fork":false,"pushed_at":"2025-04-09T19:52:53.000Z","size":254,"stargazers_count":7,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-14T22:22:08.884Z","etag":null,"topics":["canvas","d3","data-visualization","svg","zooming"],"latest_commit_sha":null,"homepage":"https://vasturiano.github.io/d3-zoomable/example/svg/","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/vasturiano.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-14T05:48:36.000Z","updated_at":"2025-04-09T19:52:57.000Z","dependencies_parsed_at":"2024-06-19T00:00:57.393Z","dependency_job_id":"eb1db238-addb-42ee-844a-465e58388a89","html_url":"https://github.com/vasturiano/d3-zoomable","commit_stats":{"total_commits":35,"total_committers":2,"mean_commits":17.5,"dds":"0.17142857142857137","last_synced_commit":"fd468a1fec767eb1bc9abf28aa7939898516d684"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":"vasturiano/ui-module","purl":"pkg:github/vasturiano/d3-zoomable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Fd3-zoomable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Fd3-zoomable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Fd3-zoomable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Fd3-zoomable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vasturiano","download_url":"https://codeload.github.com/vasturiano/d3-zoomable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Fd3-zoomable/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267180092,"owners_count":24048488,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["canvas","d3","data-visualization","svg","zooming"],"created_at":"2025-07-26T14:42:10.248Z","updated_at":"2025-07-26T14:42:14.443Z","avatar_url":"https://github.com/vasturiano.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"d3-zoomable\n==================\n\n[![NPM package][npm-img]][npm-url]\n[![Build Size][build-size-img]][build-size-url]\n[![NPM Downloads][npm-downloads-img]][npm-downloads-url]\n\nThis reusable component provides an easy way to make DOM elements zoomable/pannable using mouse wheel/drag events. It is mostly a convenience wrapper around [d3-zoom](https://github.com/d3/d3-zoom) functionality which hides away some of the complexity and provides easy access to common use cases.\n\nSupports zooming `svg` (via transform attribute), `canvas` (via context transform) or even plain `html` DOM elements (via transform style).\n\nCheck out the examples:\n* [HTML](https://vasturiano.github.io/d3-zoomable/example/html/) ([source](https://github.com/vasturiano/d3-zoomable/blob/master/example/html/index.html))\n* [SVG](https://vasturiano.github.io/d3-zoomable/example/svg/) ([source](https://github.com/vasturiano/d3-zoomable/blob/master/example/svg/index.html))\n* [Canvas](https://vasturiano.github.io/d3-zoomable/example/canvas/) ([source](https://github.com/vasturiano/d3-zoomable/blob/master/example/canvas/index.html))\n\n## Quick start\n\n```js\nimport zoomable from 'd3-zoomable';\n```\nor using a *script* tag\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/d3-zoomable\"\u003e\u003c/script\u003e\n```\nthen\n```js\nconst myZoom = new zoomable(\u003cDOM element to capture mouse events\u003e)\n    .svgEl(\u003cSVG element to transform\u003e);\n```\n\n## API reference\n\n| Method | Description | Default |\n| --- | --- | :--: |\n| \u003cb\u003ehtmlEl\u003c/b\u003e([\u003ci\u003enode, d3-selection or array\u003c/i\u003e]) | Getter/setter for the HTML DOM element to control using the `transform` style property. Also accepts a list of elements by passing an array. | |\n| \u003cb\u003esvgEl\u003c/b\u003e([\u003ci\u003enode, d3-selection or array\u003c/i\u003e]) | Getter/setter for the SVG DOM element to control using the `transform` attribute. Also accepts a list of elements by passing an array. | |\n| \u003cb\u003ecanvasEl\u003c/b\u003e([\u003ci\u003enode, d3-selection or array\u003c/i\u003e]) | Getter/setter for the Canvas DOM element to control using context transform operations. Also accepts a list of elements by passing an array. | |\n| \u003cb\u003eenableX\u003c/b\u003e([\u003ci\u003ebool\u003c/i\u003e]) | Getter/setter for whether to enable zooming along the X axis. | `true` |\n| \u003cb\u003eenableY\u003c/b\u003e([\u003ci\u003ebool\u003c/i\u003e]) | Getter/setter for whether to enable zooming along the Y axis. | `true` |\n| \u003cb\u003escaleExtent\u003c/b\u003e([\u003ci\u003e[number, number]\u003c/i\u003e]) | Getter/setter for the zoom limits to enforce, similar to [d3-zoom scaleExtent](https://github.com/d3/d3-zoom#zoom_scaleExtent). | `[1, ∞]` |\n| \u003cb\u003etranslateExtent\u003c/b\u003e([\u003ci\u003e[[number, number], [number, number]]\u003c/i\u003e]) | Getter/setter for the pan limits to enforce, similar to [d3-zoom translateExtent](https://github.com/d3/d3-zoom#zoom_translateExtent). | `[[-∞, -∞], [+∞, +∞]]` |\n| \u003cb\u003ecurrent\u003c/b\u003e() | Getter for the current transform settings, in `{ x, y, k }` syntax. |  |\n| \u003cb\u003ezoomBy\u003c/b\u003e(\u003ci\u003enumber\u003c/i\u003e[, \u003ci\u003eduration\u003c/i\u003e]) | Programmatically adjust the zoom scale by a certain amount. Optionally set a transition duration (in `ms`) to animate the transformation. |  |\n| \u003cb\u003ezoomReset\u003c/b\u003e([\u003ci\u003eduration\u003c/i\u003e]) | Programmatically reset the zoom to its initial setting (`{ x: 0, y: 0, k: 1 }`). Optionally set a transition duration (in `ms`) to animate the transformation. |  |\n| \u003cb\u003ezoomTo\u003c/b\u003e(\u003ci\u003e{ x, y, k }\u003c/i\u003e [, \u003ci\u003eduration\u003c/i\u003e]) | Programmatically apply a certain zoom setting, defined by the `x`, `y` translation, and the `k` scaling. Optionally set a transition duration (in `ms`) to animate the transformation. |  |\n| \u003cb\u003eonChange\u003c/b\u003e(\u003ci\u003efn(newTransform, previousTransform, duration)\u003c/i\u003e) | Callback function invoked whenever the zoom settings change, either by user interaction of programmatically. The callback arguments include the new transform (`{ x, y, k }` syntax), the previous transform, and the duration of the zoom (in `ms`) in the case of programmatic requests. | |\n\n\n[npm-img]: https://img.shields.io/npm/v/d3-zoomable\n[npm-url]: https://npmjs.org/package/d3-zoomable\n[build-size-img]: https://img.shields.io/bundlephobia/minzip/d3-zoomable\n[build-size-url]: https://bundlephobia.com/result?p=d3-zoomable\n[npm-downloads-img]: https://img.shields.io/npm/dt/d3-zoomable\n[npm-downloads-url]: https://www.npmtrends.com/d3-zoomable\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Fd3-zoomable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvasturiano%2Fd3-zoomable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Fd3-zoomable/lists"}