Zooming changes a map’s scale and visible position so users can focus on a region and inspect more detail. Panning moves the view across the map. section 13.3
A D3 zoom implementation proceeds through a few practical steps:
- Create a zoom behavior with d3.zoom() and listen for the zoom event. section 13.3
- Attach the behavior to the map container with selection.call(). section 13.3
- Apply the event’s transform to the SVG; k represents scale, while x and y represent translation. section 13.3
- Hide overflow and constrain scale and translation so the map remains inside its container. section 13.3
Interactive world map
A world map responds to mouse-wheel or trackpad gestures, applies the zoom transform to its SVG, limits scale from 1 to 5, and can expose a reset control after the view changes. section 13.3
Listing 13.12 Implementing zooming and panning (map-world.js)
...
import { zoom } from "d3-zoom";
export const drawWorldMap = (laureates, world) => {
...
const zoomHandler = zoom() #1
.on("zoom", (e) => { #2
console.log(e);
});
select(".map-container") #3
.call(zoomHandler);
};
Inspect the minimal D3 pattern for creating a zoom handler, logging its event, and attaching it to the map container. section 13.3
