Back to D3

Zoom interpolation

docs/d3-interpolate/zoom.md

7.9.01.6 KB
Original Source

Zoom interpolation

An interpolator for zooming smoothly between two views of a two-dimensional plane based on “Smooth and efficient zooming and panning” by Jarke J. van Wijk and Wim A.A. Nuij.

interpolateZoom(a, b) {#interpolateZoom}

js
d3.interpolateZoom([30, 30, 40], [135, 85, 60])(0.5) // [72, 52, 126.04761005270991]

Examples · Source · Returns an interpolator between the two views a and b. 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.

The returned interpolator exposes a interpolate.duration property which encodes the recommended transition duration in milliseconds. This duration is based on the path length of the curved trajectory through xy space. If you want a slower or faster transition, multiply this by an arbitrary scale factor (<i>V</i> as described in the original paper).

interpolateZoom.rho(rho) {#interpolateZoom_rho}

js
d3.interpolateZoom.rho(0.5)([30, 30, 40], [135, 85, 60])(0.5) // [72, 52, 51.09549882328188]

Source · Given a zoom interpolator, returns a new zoom interpolator using the specified curvature rho. When rho is close to 0, the interpolator is almost linear. The default curvature is sqrt(2).