@types/d3-zoom

constructor

constructor(k: number, x: number, y: number);

• Returns a transform with scale k and translation (x, y).

property k

readonly k: number;

• The scale factor k. This property should be considered read-only; instead of mutating a transform, use transform.scale and transform.translate to derive a new transform. Also see zoom.scaleBy, zoom.scaleTo and zoom.translateBy for convenience methods on the zoom behavior.

property x

readonly x: number;

• The translation amount tx along the x-axis. This property should be considered read-only; instead of mutating a transform, use transform.scale and transform.translate to derive a new transform. Also see zoom.scaleBy, zoom.scaleTo and zoom.translateBy for convenience methods on the zoom behavior.

property y

readonly y: number;

• The translation amount ty along the y-axis This property should be considered read-only; instead of mutating a transform, use transform.scale and transform.translate to derive a new transform. Also see zoom.scaleBy, zoom.scaleTo and zoom.translateBy for convenience methods on the zoom behavior.

method apply

apply: (point: [number, number]) => [number, number];

• Return the transformation of the specified point which is a two-element array of numbers [x, y]. The returned point is equal to [xk + tx, yk + ty].

  Parameter point

  Point coordinates [x, y]

method applyX

applyX: (x: number) => number;

• Return the transformation of the specified x-coordinate, xk + tx.

  Parameter x

  Value of x-coordinate.

method applyY

applyY: (y: number) => number;

• Return the transformation of the specified y-coordinate, yk + ty.

  Parameter y

  Value of y-coordinate.

method invert

invert: (point: [number, number]) => [number, number];

• Return the inverse transformation of the specified point which is a two-element array of numbers [x, y]. The returned point is equal to [(x - tx) / k, (y - ty) / k].

  Parameter point

  Point coordinates [x, y]

method invertX

invertX: (x: number) => number;

• Return the inverse transformation of the specified x-coordinate, (x - tx) / k.

  Parameter x

  Value of x-coordinate.

method invertY

invertY: (y: number) => number;

• Return the inverse transformation of the specified y-coordinate, (y - ty) / k.

  Parameter y

  Value of y-coordinate.

method rescaleX

rescaleX: <S extends ZoomScale>(xScale: S) => S;

• Returns a copy of the continuous scale x whose domain is transformed. This is implemented by first applying the inverse x-transform on the scale’s range, and then applying the inverse scale to compute the corresponding domain

  The scale x must use d3.interpolateNumber; do not use continuous.rangeRound as this reduces the accuracy of continuous.invert and can lead to an inaccurate rescaled domain. This method does not modify the input scale x; x thus represents the untransformed scale, while the returned scale represents its transformed view.

  Parameter xScale

  A continuous scale for x-dimension.

method rescaleY

rescaleY: <S extends ZoomScale>(yScale: S) => S;

• Returns a copy of the continuous scale y whose domain is transformed. This is implemented by first applying the inverse y-transform on the scale’s range, and then applying the inverse scale to compute the corresponding domain

  The scale y must use d3.interpolateNumber; do not use continuous.rangeRound as this reduces the accuracy of continuous.invert and can lead to an inaccurate rescaled domain. This method does not modify the input scale x; x thus represents the untransformed scale, while the returned scale represents its transformed view.

  Parameter yScale

  A continuous scale for y-dimension.

method scale

scale: (k: number) => ZoomTransform;

• Return a transform whose scale k1 is equal to k0 × k, where k0 is this transform’s scale.

  Parameter k

  A scale factor.

method toString

toString: () => string;

• Return a string representing the SVG transform corresponding to this transform.

method translate

translate: (x: number, y: number) => ZoomTransform;

• Returns a transform whose translation tx1 and ty1 is equal to tx0 + tkx and ty0 + tky, where tx0 and ty0 is this transform’s translation and tk is this transform’s scale.

  Parameter x

  Amount of translation in x-direction.

  Parameter y

  Amount of translation in y-direction.

property sourceEvent

sourceEvent: any;

• The underlying input event, such as mousemove or touchmove.

property target

target: ZoomBehavior<ZoomRefElement, Datum>;

• The ZoomBehavior associated with the event

property transform

transform: ZoomTransform;

• The current zoom transform

property type

type: 'start' | 'zoom' | 'end' | string;

• The event type for the zoom event

method clickDistance

clickDistance: { (): number; (distance: number): this };

• Return the current click distance threshold, which defaults to zero.

• Set the maximum distance that the mouse can move between mousedown and mouseup that will trigger a subsequent click event. If at any point between mousedown and mouseup the mouse is greater than or equal to distance from its position on mousedown, the click event following mouseup will be suppressed.

  Parameter distance

  The distance threshold between mousedown and mouseup measured in client coordinates (event.clientX and event.clientY). The default is zero.

method constrain

constrain: {
    (): (
        transform: ZoomTransform,
        extent: [[number, number], [number, number]],
        translateExtent: [[number, number], [number, number]]
    ) => ZoomTransform;
    (
        constraint: (
            transform: ZoomTransform,
            extent: [[number, number], [number, number]],
            translateExtent: [[number, number], [number, number]]
        ) => ZoomTransform
    ): this;
};

• Returns the current constraint function. The default implementation attempts to ensure that the viewport extent does not go outside the translate extent.

• Sets the transform constraint function to the specified function and returns the zoom behavior.

  Parameter constraint

  A constraint function which returns a transform given the current transform, viewport extent and translate extent. The default implementation attempts to ensure that the viewport extent does not go outside the translate extent.

method duration

duration: { (): number; (duration: number): this };

• Get the duration for zoom transitions on double-click and double-tap in milliseconds.

• Set the duration for zoom transitions on double-click and double-tap to the specified number of milliseconds and returns the zoom behavior.

  To disable double-click and double-tap transitions, you can remove the zoom behavior’s dblclick event listener after applying the zoom behavior to the selection.

  Parameter duration

  in milliseconds.

method extent

extent: {
    (): (
        this: ZoomRefElement,
        datum: Datum
    ) => [[number, number], [number, number]];
    (extent: [[number, number], [number, number]]): this;
    (
        extent: (
            this: ZoomRefElement,
            datum: Datum
        ) => [[number, number], [number, number]]
    ): this;
};

• Return the current extent accessor, which defaults to [[0, 0], [width, height]] where width is the client width of the element and height is its client height; for SVG elements, the nearest ancestor SVG element’s width and height is used. In this case, the owner SVG element must have defined width and height attributes rather than (for example) relying on CSS properties or the viewBox attribute; SVG provides no programmatic method for retrieving the initial viewport size. Alternatively, consider using element.getBoundingClientRect. (In Firefox, element.clientWidth and element.clientHeight is zero for SVG elements!)

• Set the viewport extent to the specified array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner of the viewport and [x1, y1] is the bottom-right corner of the viewport, and return this zoom behavior.

  The viewport extent affects several functions: the center of the viewport remains fixed during changes by zoom.scaleBy and zoom.scaleTo; the viewport center and dimensions affect the path chosen by d3.interpolateZoom; and the viewport extent is needed to enforce the optional translate extent.

  Parameter extent

  An extent specified as an array of two coordinates.

• Set the viewport extent to the array of points [[x0, y0], [x1, y1]] returned by the extent accessor function, and return this zoom behavior. The extent accessor function is evaluated for each element.

  [x0, y0] is the top-left corner of the viewport and [x1, y1] is the bottom-right corner of the viewport.

  The viewport extent affects several functions: the center of the viewport remains fixed during changes by zoom.scaleBy and zoom.scaleTo; the viewport center and dimensions affect the path chosen by d3.interpolateZoom; and the viewport extent is needed to enforce the optional translate extent.

  The default is [[0, 0], [width, height]] where width is the client width of the element and height is its client height; for SVG elements, the nearest ancestor SVG element’s width and height is used. In this case, the owner SVG element must have defined width and height attributes rather than (for example) relying on CSS properties or the viewBox attribute; SVG provides no programmatic method for retrieving the initial viewport size. Alternatively, consider using element.getBoundingClientRect. (In Firefox, element.clientWidth and element.clientHeight is zero for SVG elements!)

  Parameter extent

  An extent accessor function which is evaluated for each selected element, being passed the current datum d, with the this context as the current DOM element. The function returns the extent array.

method filter

filter: {
    (): (this: ZoomRefElement, event: any, datum: Datum) => boolean;
    (filter: (this: ZoomRefElement, event: any, datum: Datum) => boolean): this;
};

• Returns the current filter function.

• Sets the filter to the specified filter function and returns the zoom behavior. The filter function is invoked in the zoom initiating event handlers of each element to which the zoom behavior was applied.

  If the filter returns falsey, the initiating event is ignored and no zoom gesture is started. Thus, the filter determines which input events are ignored. The default filter ignores mousedown events on secondary buttons, since those buttons are typically intended for other purposes, such as the context menu.

  Parameter filter

  A filter function which is invoked in the zoom initiating event handlers of each element to which the zoom behavior was applied, in order, being passed the current event (event) and datum d, with the this context as the current DOM element. The function returns a boolean value.

method interpolate

interpolate: {
    <
        InterpolationFactory extends (
            a: ZoomView,
            b: ZoomView
        ) => (t: number) => ZoomView
    >(): InterpolationFactory;
    (
        interpolatorFactory: (
            a: ZoomView,
            b: ZoomView
        ) => (t: number) => ZoomView
    ): this;
};

• Returns the current interpolation factory, which defaults to d3.interpolateZoom to implement smooth zooming.

• Sets the interpolation factory for zoom transitions to the specified function. Use the default d3.interpolateZoom to implement smooth zooming. To apply direct interpolation between two views, try d3.interpolate instead.

  Each view is defined as an array of three numbers: cx, cy and width. The first two coordinates cx, cy represent the center of the viewport; the last coordinate width represents the size of the viewport.

  Parameter interpolatorFactory

  An interpolator factory to be used to generate interpolators between zooms for transitions.

method on

on: {
    (typenames: string): (this: ZoomRefElement, event: any, d: Datum) => void;
    (typenames: string, listener: null): this;
    (
        typenames: string,
        listener: (this: ZoomRefElement, event: any, d: Datum) => void
    ): this;
};

• Return the first currently-assigned listener matching the specified typenames, if any.

  Parameter typenames

  The typenames is a string containing one or more typename separated by whitespace. Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar"; the name allows multiple listeners to be registered for the same type. The type must be one of the following: start (after zooming begins [such as mousedown]), zoom (after a change to the zoom transform [such as mousemove], or end (after an active pointer becomes inactive [such as on mouseup].)

• Remove the current event listeners for the specified typenames, if any, return the drag behavior.

  Parameter typenames

  The typenames is a string containing one or more typename separated by whitespace. Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar"; the name allows multiple listeners to be registered for the same type. The type must be one of the following: start (after zooming begins [such as mousedown]), zoom (after a change to the zoom transform [such as mousemove], or end (after an active pointer becomes inactive [such as on mouseup].)

  Parameter listener

  Use null to remove the listener.

• Set the event listener for the specified typenames and return the zoom behavior. If an event listener was already registered for the same type and name, the existing listener is removed before the new listener is added. When a specified event is dispatched, each listener will be invoked with the same context and arguments as selection.on listeners.

  Parameter typenames

  The typenames is a string containing one or more typename separated by whitespace. Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar"; the name allows multiple listeners to be registered for the same type. The type must be one of the following: start (after zooming begins [such as mousedown]), zoom (after a change to the zoom transform [such as mousemove], or end (after an active pointer becomes inactive [such as on mouseup].)

  Parameter listener

  An event listener function which is evaluated for each selected element, in order, being passed the current event (event) and datum d, with the this context as the current DOM element.

method scaleBy

scaleBy: (
    selection:
        | Selection<ZoomRefElement, Datum, any, any>
        | TransitionLike<ZoomRefElement, Datum>,
    k: number | ValueFn<ZoomRefElement, Datum, number>,
    p?: [number, number] | ValueFn<ZoomRefElement, Datum, [number, number]>
) => void;

• If selection is a selection, scales the current zoom transform of the selected elements by k, such that the new k₁ = k₀k. The reference point p does move. If p is not specified, it defaults to the center of the viewport extent. If selection is a transition, defines a “zoom” tween translating the current transform. This method is a convenience method for zoom.transform.

  Parameter selection

  A selection or a transition.

  Parameter k

  Scale factor. A number or a function that returns a number. If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.

  Parameter p

  A two-element array [px,py] or a function. If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.

method scaleExtent

scaleExtent: { (): [number, number]; (extent: [number, number]): this };

• Return the current scale extent.

• Set the scale extent to the specified array of numbers [k0, k1] where k0 is the minimum allowed scale factor and k1 is the maximum allowed scale factor, and return this zoom behavior.

  The scale extent restricts zooming in and out. It is enforced on interaction and when using zoom.scaleBy, zoom.scaleTo and zoom.translateBy; however, it is not enforced when using zoom.transform to set the transform explicitly.

  The default scale extent is [0, infinity].

  If the user tries to zoom by wheeling when already at the corresponding limit of the scale extent, the wheel events will be ignored and not initiate a zoom gesture. This allows the user to scroll down past a zoomable area after zooming in, or to scroll up after zooming out. If you would prefer to always prevent scrolling on wheel input regardless of the scale extent, register a wheel event listener to prevent the browser default behavior

  Parameter extent

  A scale extent array of two numbers representing the scale boundaries.

method scaleTo

scaleTo: (
    selection:
        | Selection<ZoomRefElement, Datum, any, any>
        | TransitionLike<ZoomRefElement, Datum>,
    k: number | ValueFn<ZoomRefElement, Datum, number>,
    p?: [number, number]
) => void;

• If selection is a selection, scales the current zoom transform of the selected elements to k, such that the new k₁ = k. The reference point p does move. If p is not specified, it defaults to the center of the viewport extent. If selection is a transition, defines a “zoom” tween translating the current transform. This method is a convenience method for zoom.transform.

  Parameter selection

  : A selection or a transition.

  Parameter k

  Scale factor. A number or a function that returns a number. If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.

  Parameter p

  A two-element array [px,py] or a function. If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.

method tapDistance

tapDistance: { (): number; (distance: number): this };

• Return the current tap distance threshold, which defaults to 10.

• Sets the maximum distance that a double-tap gesture can move between first touchstart and second touchend that will trigger a subsequent double-click event.

  Parameter distance

  The distance threshold between mousedown and mouseup measured in client coordinates (event.clientX and event.clientY). The default is 10.

method touchable

touchable: {
    (): ValueFn<ZoomRefElement, Datum, boolean>;
    (touchable: boolean): this;
    (touchable: ValueFn<ZoomRefElement, Datum, boolean>): this;
};

• Returns the current touch support detector, which defaults to a function returning true, if the "ontouchstart" event is supported on the current element.

• Sets the touch support detector to the specified boolean value and returns the zoom behavior.

  Touch event listeners are only registered if the detector returns truthy for the corresponding element when the zoom behavior is applied. The default detector works well for most browsers that are capable of touch input, but not all; Chrome’s mobile device emulator, for example, fails detection.

  Parameter touchable

  A boolean value. true when touch event listeners should be applied to the corresponding element, otherwise false.

• Sets the touch support detector to the specified function and returns the zoom behavior.

  Touch event listeners are only registered if the detector returns truthy for the corresponding element when the zoom behavior is applied. The default detector works well for most browsers that are capable of touch input, but not all; Chrome’s mobile device emulator, for example, fails detection.

  Parameter touchable

  A touch support detector function, which returns true when touch event listeners should be applied to the corresponding element. The function is evaluated for each selected element to which the zoom behavior was applied, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element. The function returns a boolean value.

method transform

transform: (
    selection:
        | Selection<ZoomRefElement, Datum, any, any>
        | TransitionLike<ZoomRefElement, Datum>,
    transform:
        | ZoomTransform
        | ((this: ZoomRefElement, event: any, d: Datum) => ZoomTransform),
    point?:
        | [number, number]
        | ((this: ZoomRefElement, event: any, d: Datum) => [number, number])
) => void;

• If selection is a selection, sets the current zoom transform of the selected elements to the specified transform, instantaneously emitting start, zoom and end events. If selection is a transition, defines a “zoom” tween to the specified transform using d3.interpolateZoom, emitting a start event when the transition starts, zoom events for each tick of the transition, and then an end event when the transition ends (or is interrupted). The transition will attempt to minimize the visual movement around the specified point; if the point is not specified, it defaults to the center of the viewport extent.

  This function is typically not invoked directly, and is instead invoked via selection.call or transition.call.

  Parameter selection

  A selection or a transition.

  Parameter transform

  A zoom transform or a function that returns a zoom transform. If a function, it is invoked for each selected element, being passed the current event (event) and datum d, with the this context as the current DOM element.

  Parameter point

  A two-element array [x, y] or a function that returns such an array. If a function, it is invoked for each selected element, being passed the current event (event) and datum d, with the this context as the current DOM element.

method translateBy

translateBy: (
    selection:
        | Selection<ZoomRefElement, Datum, any, any>
        | TransitionLike<ZoomRefElement, Datum>,
    x: number | ValueFn<ZoomRefElement, Datum, number>,
    y: number | ValueFn<ZoomRefElement, Datum, number>
) => void;

• If selection is a selection, translates the current zoom transform of the selected elements by x and y, such that the new tx1 = tx0 + kx and ty1 = ty0 + ky. If selection is a transition, defines a “zoom” tween translating the current transform. This method is a convenience method for zoom.transform.

  Parameter selection

  A selection or a transition.

  Parameter x

  A number or a function that returns a number. If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.

  Parameter y

  A number or a function that returns a number. If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.

method translateExtent

translateExtent: {
    (): [[number, number], [number, number]];
    (extent: [[number, number], [number, number]]): this;
};

• Return the current translate extent.

• Set the translate extent to the specified array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner of the world and [x1, y1] is the bottom-right corner of the world, and return this zoom behavior.

  The translate extent restricts panning, and may cause translation on zoom out. It is enforced on interaction and when using zoom.scaleBy, zoom.scaleTo and zoom.translateBy; however, it is not enforced when using zoom.transform to set the transform explicitly.

  The default scale extent is [[-infinity, infinity], [-infinity, infinity]].

  Parameter extent

  A translate extent array, i.e. an array of two arrays, each representing a point.

method translateTo

translateTo: (
    selection:
        | Selection<ZoomRefElement, Datum, any, any>
        | TransitionLike<ZoomRefElement, Datum>,
    x: number | ValueFn<ZoomRefElement, Datum, number>,
    y: number | ValueFn<ZoomRefElement, Datum, number>,
    p?: [number, number] | ValueFn<ZoomRefElement, Datum, [number, number]>
) => void;

• If selection is a selection, translates the current zoom transform of the selected elements such that the given position ⟨x,y⟩ appears at given point p. The new tx = px - kx and ty = py - ky. If p is not specified, it defaults to the center of the viewport extent. If selection is a transition, defines a “zoom” tween translating the current transform. This method is a convenience method for zoom.transform.

  Translates the current zoom transform of the selected elements such that the specified position ⟨x,y⟩ appears at the center of the viewport extent. The new tx = cx - kx and ty = cy - ky, where ⟨cx,cy⟩ is the center.

  x is provided as a constant for all elements. y is provided as a constant for all elements.

  Parameter selection

  A selection or a transition.

  Parameter x

  A number or a function that returns a number. If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.

  Parameter y

  A number or a function that returns a number. If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.

  Parameter p

  A two-element array [px,py] or a function If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.

method wheelDelta

wheelDelta: {
    (): ValueFn<ZoomRefElement, Datum, number>;
    (delta: number | ((event: WheelEvent) => number)): this;
};

• Returns the current wheelDelta function.

• Sets the wheel delta function to the specified function and returns the zoom behavior. The wheel delta function which is invoked in the wheel event handler of each element to which the zoom behavior was applied. The value Δ returned by the wheel delta function determines the amount of scaling applied in response to a WheelEvent. The scale factor transform.k is multiplied by 2Δ; for example, a Δ of +1 doubles the scale factor, Δ of -1 halves the scale factor.

  Parameter delta

  Wheel delta function which is invoked in the wheel event handler of each element to which the zoom behavior was applied, in order, being passed the wheel event that triggered the handler, with this as the current DOM element. The function returns a numeric value.

call signature

(selection: Selection<ZoomRefElement, Datum, any, any>, ...args: any[]): void;

• Applies this zoom behavior to the specified selection, binding the necessary event listeners to allow panning and zooming, and initializing the zoom transform on each selected element to the identity transform if not already defined. This function is typically not invoked directly, and is instead invoked via selection.call.

  For details see: https://github.com/d3/d3-zoom#_zoom

  Parameter selection

  A D3 selection of elements.

  Parameter args

  Optional arguments to be passed in.

method copy

copy: () => ZoomScale;

method domain

domain: { (): number[] | Date[]; (domain: (number | Date)[]): this };

method invert

invert: (value: number) => number | Date;

method range

range: { (): number[]; (range: number[]): this };