Handling zoom and rotation

We set up the zoom behavior, meaning that our Canvas is

  1. listening on every mouse wheel and drag
  2. firing the zoomed() handler on each of these events

Let’s now fill our handler to do something to the globe.

What do we want to do? From a bird’s perspective, for each zoom, we want to establish the scale for the projection, apply it to the path, and redraw the globe a little bit bigger or a little smaller. For each drag, we would want to establish the new rotation values, apply them to the projection and path, and redraw the globe a little bit rotated. To get there, the handler should distinguish between a zoom and a drag. A zoom should lead to a projection-scale change and a drag should lead to a rotation change. ...

Get Learning D3.js 5 Mapping - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.