block by mbostock b783fbb2e673561d214e09c7fb5cedee

Zoom Transitions

Full Screen

This example demonstrates smooth zoom transitions using d3-zoom. Every 2.5 seconds, a point is randomly selected, and the transform to position the selected point at the center of the viewport is computed:

function transform() {
  return d3.zoomIdentity
      .translate(width / 2, height / 2)
      .scale(8)
      .translate(-point[0], -point[1]);
}

Then, transition.call is used to invoke zoom.transform with the new transform, initiating a smooth zoom transition from the current transform.

Updated Example →

index.html