liveBook · Manning

Transform object

As explained in D3.js in Action, Third Edition

A transform object is an object containing the scale factor and translation coordinates describing a zoom state.

A transform object records a map’s current zoom state: k is the scale factor, while x and y are horizontal and vertical translations. A zoom event supplies this object for applying the visible transformation. section 13.3

Transforming a map during zoom

A d3-zoom handler receives the zoom event and assigns e.transform to the SVG element’s transform attribute, moving and scaling the map.

How D3.js in Action, Third Edition covers it

How deep it goes
Defines k, x, and y, then applies them through SVG transformation without detailing transform mathematics.
Examples
Uses an interactive world map, an SVG container, d3-zoom handlers, and a reset button.
What it assumes
Assumes a D3 zoom behavior attached to an SVG map container and teaches the event’s k, x, and y values.
What you can do after
Apply it via d3-zoom to scale, translate, constrain, and reset an interactive SVG map.
How it connects
Connects zoom events, SVG transformations, scale extent, translation extent, and reset controls.
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.