liveBook · Manning

Invert()

As explained in D3.js in Action, Third Edition

invert() is a scale method that maps a value from the scale's output range back to the corresponding input-domain value.

invert() reverses a continuous scale: give it a value from the output range, such as a pixel position, and it returns the corresponding input-domain value. section 7.3.2 section 13.4

Interactive year lookup

A streamgraph tooltip converts the mouse’s x-position into a year with Math.round(xScale.invert(xPosition)), then updates the year and sales breakdown.

How D3.js in Action, Third Edition covers it

How deep it goes
Explains the range-to-domain reversal and demonstrates rounding continuous results for integer years.
Examples
Uses a music-sales streamgraph tooltip and a laureates timeline brush to convert horizontal positions into years.
What it assumes
Assumes familiarity with D3 continuous scales, their domains and ranges, and event coordinates.
What you can do after
Apply it via D3 to translate interactive pixel positions into domain values and update tooltips or filtered marks.
How it connects
Connects continuous scales with tooltips, brushing, pointer coordinates, domains, and ranges.
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.