Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
d3-zoomable
Advanced tools
Readme
This 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 functionality which hides away some of the complexity and provides easy access to common use cases.
Supports zooming svg
(via transform attribute), canvas
(via context transform) or even plain html
DOM elements (via transform style).
Check out the examples:
import zoomable from 'd3-zoomable';
or using a script tag
<script src="//unpkg.com/d3-zoomable"></script>
then
const myZoom = zoomable();
myZoom(<DOM element to capture mouse events>)
.svgEl(<SVG element to transform>);
Method | Description | Default |
---|---|---|
htmlEl([node, d3-selection or array]) | Getter/setter for the HTML DOM element to control using the transform style property. Also accepts a list of elements by passing an array. | |
svgEl([node, d3-selection or array]) | Getter/setter for the SVG DOM element to control using the transform attribute. Also accepts a list of elements by passing an array. | |
canvasEl([node, d3-selection or array]) | Getter/setter for the Canvas DOM element to control using context transform operations. Also accepts a list of elements by passing an array. | |
enableX([bool]) | Getter/setter for whether to enable zooming along the X axis. | true |
enableY([bool]) | Getter/setter for whether to enable zooming along the Y axis. | true |
scaleExtent([[number, number]]) | Getter/setter for the zoom limits to enforce, similar to d3-zoom scaleExtent. | [1, ∞] |
translateExtent([[[number, number], [number, number]]]) | Getter/setter for the pan limits to enforce, similar to d3-zoom translateExtent. | [[-∞, -∞], [+∞, +∞]] |
current() | Getter for the current transform settings, in { x, y, k } syntax. | |
zoomBy(number[, duration]) | Programmatically adjust the zoom scale by a certain amount. Optionally set a transition duration (in ms ) to animate the transformation. | |
zoomReset([duration]) | 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. | |
zoomTo({ x, y, k } [, duration]) | 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. | |
onChange(fn(newTransform, previousTransform, duration)) | 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. |
FAQs
Easy way to apply d3-zoom functionality to DOM elements
The npm package d3-zoomable receives a total of 1,582 weekly downloads. As such, d3-zoomable popularity was classified as popular.
We found that d3-zoomable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.