Class 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

Constructors

constructor

Methods

apply applyX applyY invert invertX invertY rescaleX rescaleY scale toString translate

Properties

k x y

Constructors

constructor

  • new ZoomTransform(k, x, y): ZoomTransform

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

    Parameters

    • k: number
    • x: number
    • y: number

    Returns ZoomTransform

Methods

apply

  • apply(point): [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].

    Parameters

    • point: [number, number]

      Point coordinates [x, y]

    Returns [number, number]

applyX

  • applyX(x): number

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

    Parameters

    • x: number

      Value of x-coordinate.

    Returns number

applyY

  • applyY(y): number

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

    Parameters

    • y: number

      Value of y-coordinate.

    Returns number

invert

  • invert(point): [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].

    Parameters

    • point: [number, number]

      Point coordinates [x, y]

    Returns [number, number]

invertX

  • invertX(x): number

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

    Parameters

    • x: number

      Value of x-coordinate.

    Returns number

invertY

  • invertY(y): number

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

    Parameters

    • y: number

      Value of y-coordinate.

    Returns number

rescaleX

  • rescaleX<S>(xScale): 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.

    Type Parameters

    Parameters

    • xScale: S

      A continuous scale for x-dimension.

    Returns S

rescaleY

  • rescaleY<S>(yScale): 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.

    Type Parameters

    Parameters

    • yScale: S

      A continuous scale for y-dimension.

    Returns S

scale

  • scale(k): ZoomTransform

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

    Parameters

    • k: number

      A scale factor.

    Returns ZoomTransform

toString

  • toString(): string

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

    Returns string

translate

  • translate(x, y): 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.

    Parameters

    • x: number

      Amount of translation in x-direction.

    • y: number

      Amount of translation in y-direction.

    Returns ZoomTransform

Properties

Readonly k

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.

Readonly x

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.

Readonly y

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.

Settings

Member Visibility

Theme

On This Page