Zoom Transitions

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

function transform() {
  return d3.zoomTransform()
      .translate(width / 2, height / 2)
      .scale(8)
      .translate(-circle.x, -circle.y);
}

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

forked from mbostock's block: Zoom Transitions

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="https://d3js.org/d3-array.v0.7.min.js"></script>
<script src="https://d3js.org/d3-random.v0.2.min.js"></script>
<script src="https://d3js.org/d3-color.v0.4.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v0.4.min.js"></script>
<script src="https://d3js.org/d3-ease.v0.7.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.7.min.js"></script>
<script src="https://d3js.org/d3-selection.v0.7.min.js"></script>
<script src="https://d3js.org/d3-timer.v0.4.min.js"></script>
<script src="https://d3js.org/d3-transition.v0.2.min.js"></script>
<script src="https://d3js.org/d3-zoom.v0.0.min.js"></script>
<script>

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height;

var randomX = d3_random.randomNormal(width / 2, 60),
    randomY = d3_random.randomNormal(height / 2, 60),
    circles = d3_array.range(1000).map(function() { return {x: randomX(), y: randomY()}; }),
    circle = circles.pop();

var zoom = d3_zoom.zoom()
    .on("zoom", zoomed);

d3_selection.select(canvas)
    .call(zoom.transform, transform)
    .call(transition);

function zoomed() {
  context.save();
  context.clearRect(0, 0, width, height);
  context.translate(d3_selection.event.translate[0], d3_selection.event.translate[1]);
  context.scale(d3_selection.event.scale, d3_selection.event.scale);

context.beginPath();
  circles.forEach(drawCircle);
  context.lineWidth = 1.5 / d3_selection.event.scale;
  context.stroke();

context.beginPath();
  drawCircle(circle);
  context.fillStyle = "red";
  context.fill();
  context.stroke();

context.restore();
}

function drawCircle(circle) {
  var radius = 5 / (d3_selection.event ? d3_selection.event.scale : 1);
  context.moveTo(circle.x + radius, circle.y);
  context.arc(circle.x, circle.y, radius, 0, 2 * Math.PI);
}

function transform() {
  return d3_zoom.zoomTransform()
      .translate(width / 2, height / 2)
      .scale(8)
      .translate(-circle.x, -circle.y);
}

function transition(canvas) {
  var n = circles.length,
      i = Math.random() * n | 0,
      c = circles[i]; // Pick a random circle.

circles[i] = circles[n - 1];
  circles[n - 1] = circle;
  circle = c;

canvas.transition()
      .delay(500)
      .duration(2000)
      .call(zoom.transform, transform)
      .on("end", function() { canvas.call(transition); });
}

</script>

https://d3js.org/d3-array.v0.7.min.js

https://d3js.org/d3-random.v0.2.min.js

https://d3js.org/d3-color.v0.4.min.js

https://d3js.org/d3-dispatch.v0.4.min.js

https://d3js.org/d3-ease.v0.7.min.js

https://d3js.org/d3-interpolate.v0.7.min.js

https://d3js.org/d3-selection.v0.7.min.js

https://d3js.org/d3-timer.v0.4.min.js

https://d3js.org/d3-transition.v0.2.min.js

https://d3js.org/d3-zoom.v0.0.min.js