Panning shifts a visualization's visible region without changing its scale, helping map users focus on areas of interest and inspect detail. section 13.3
With D3, attach a zoom behavior to the map container, listen for zoom events, and apply each event's transform to the SVG. The transform supplies horizontal and vertical translation through x and y. section 13.3
A practical map implementation also:
- Hides overflow on the map container so translated content stays inside its bordered region. section 13.3
- Constrains movement with translateExtent and limits scaling with scaleExtent, preventing the map from moving or enlarging excessively. section 13.3
- Can reveal a reset control after interaction and hide it again when the transform returns to its identity values. 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 incremental d3-zoom setup that attaches a handler to the map container and exposes the zoom event. section 13.3
