Have ideas to improve npm?Join in the discussion! »

    d3-zoomable

    1.1.4 • Public • Published

    d3-zoomable

    NPM package Build Size Dependencies

    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:

    Quick start

    import zoomable from 'd3-zoomable';
    

    or

    const zoomable = require('d3-zoomable');
    

    or even

    <script src="//unpkg.com/d3-zoomable"></script>
    

    then

    const myZoom = zoomable();
    myZoom(<DOM element to capture mouse events>)
        .svgEl(<SVG element to transform>);
    

    API reference

    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.

    Install

    npm i d3-zoomable

    DownloadsWeekly Downloads

    100

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    457 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar