liveBook · Manning

Zoom event

As explained in D3.js in Action, Third Edition

A zoom event is an event emitted by a D3 zoom behavior when the user changes the zoom or translation state.

A zoom event is emitted by a D3 zoom behavior whenever the user changes a visualization’s zoom or translation state. In a map, a listener receives the event and can read its transform object: k controls scale, while x and y control horizontal and vertical translation. section 13.3

Interactive world map

Attach a zoom behavior to .map-container, log each event while testing mouse-wheel or trackpad interaction, then transform the SVG with e.transform to enable zooming and panning. section 13.3

How D3.js in Action, Third Edition covers it

How deep it goes
Explains event fields and applies them to a map, then adds scale and translation limits without detailing D3 internals.
Examples
Uses a world map, browser console logging, SVG transformation, container clipping, and bounded map navigation.
What it assumes
Assumes familiarity with D3 selections, SVG containers, event listeners, and importing d3-zoom.
What you can do after
Apply it via d3-zoom to build bounded zooming and panning for an SVG map.
How it connects
Connects D3 zoom behavior, transform objects, SVG transforms, scale extent, and translation extent.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.