ZoomTransform

A zoom transform

The zoom behavior stores the zoom state on the element to which the zoom behavior was applied, not on the zoom behavior itself. This is because the zoom behavior can be applied to many elements simultaneously, and each element can be zoomed independently. The zoom state can change either on user interaction or programmatically via zoom.transform.

To retrieve the zoom state, use event.transform on the current zoom event within a zoom event listener (see zoom.on), or use d3.zoomTransform for a given node. The latter is particularly useful for modifying the zoom state programmatically, say to implement buttons for zooming in and out.

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

interface ZoomTransform {

readonly k: number;

readonly x: number;

readonly y: number;

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

applyX(x: number): number;

applyY(y: number): number;

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

invertX(x: number): number;

invertY(y: number): number;

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

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

scale(k: number): ZoomTransform;

toString(): string;

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

}

§Properties

readonly k: number

[src]

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.

readonly x: number

[src]

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.

readonly y: number

[src]

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.

§Methods

apply(point: [number, number]): [number, number]

[src]

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].

@param point

Point coordinates [x, y]

applyX(x: number): number

[src]

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

@param x

Value of x-coordinate.

applyY(y: number): number

[src]

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

@param y

Value of y-coordinate.

invert(point: [number, number]): [number, number]

[src]

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].

@param point

Point coordinates [x, y]

invertX(x: number): number

[src]

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

@param x

Value of x-coordinate.

invertY(y: number): number

[src]

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

@param y

Value of y-coordinate.

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

[src]

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.

@param xScale

A continuous scale for x-dimension.

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

[src]

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.

@param yScale

A continuous scale for y-dimension.

scale(k: number): ZoomTransform

[src]

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

@param k

A scale factor.

toString(): string

[src]

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

translate(x: number, y: number): ZoomTransform

[src]

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.

@param x

Amount of translation in x-direction.

@param y

Amount of translation in y-direction.