Learning D3.js 5 Mapping - Second Edition

Setting up the behavior

Zooming is no more than changing the scale for our projection. Rotating is no more than changing the rotation values of our projection. When you want the user to mandate zoom and rotation, you will need to listen to their mouse movement. As such, you will need to set up a zoom listener to track the user's mouse wheel and drag moves, and attach it to the Canvas. We implemented zoom and rotation already in chapter 5, Click-Click Boom! Applying Interactivity to Your Map. In our ready() function, as specified above, we will use D3’s zoom behavior to deliver all the user interaction changes we need:

var zoom = d3.zoom()   .scaleExtent([0.5, 4])   .on("zoom", zoomed);canvas.call(zoom);function zoomed() { // our handler code ...