liveBook · Manning

Reusable transition function

As explained in D3.js in Action, Third Edition

A reusable transition function is a function that encapsulates transition parameters for application to multiple D3 selections.

A reusable transition function stores shared animation parameters once, then applies them to multiple D3 selections. This keeps enter and exit transitions consistent while reducing repetition. section 7.4.3

Build one transition and reuse it:

  • Create a transition with d3.transition(). section 7.4.3
  • Pass the saved transition to transition(t) for both enter and exit selections. section 7.4.3

Consistent chart updates

Declare const t = d3.transition().duration(800).ease(d3.easeExpOut), then call enter.transition(t) and exit.transition(t) while updating the circles.

How D3.js in Action, Third Edition covers it

How deep it goes
Explains declaration, duration, easing, and application, but does not descend into transition internals.
Examples
Demonstrates animated cetacean circles updated through enter and exit selections in an interactive filter handler.
What it assumes
Assumes familiarity with D3 selections and enter, update, and exit data-join paths.
What you can do after
Build it from scratch by configuring one D3 transition and applying it consistently to multiple selections.
How it connects
Connects D3 transitions with duration, easing functions, data joins, enter selections, and exit selections.
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.