liveBook · Manning

Duration()

As explained in D3.js in Action, Third Edition

duration() is a D3 transition method that sets or retrieves the transition duration in milliseconds.

duration() sets how long a D3 transition runs, using milliseconds. If omitted, D3 applies a 250 ms default duration. section 7.2.4

Chain duration() after transition() and before the attributes or styles that should animate. Only properties chained after transition() are affected. section 7.2.4

Slow a histogram update

d3.selectAll("#histogram rect") .data(updatedBins) .transition() .duration(500) .ease(d3.easeCubicOut) .attr("y", d => yScale(d.length)) .attr("height", d => innerHeight - yScale(d.length)); Here, the bar position and height animate over 500 milliseconds. section 7.2.4

Reuse one duration across selections

Create a transition once, set duration(800), and pass it to both enter and exit transitions. This keeps timing consistent and avoids repeating configuration. section 7.4.3

How D3.js in Action, Third Edition covers it

How deep it goes
Defines millisecond timing, the 250 ms default, chaining scope, and reusable configuration, but defers internal timing mechanics.
Examples
Uses a histogram update with duration(500) and a reusable enter-and-exit transition with duration(800).
What it assumes
Assumes familiarity with D3 selections and transition(); teaches duration alongside delay() and ease().
What you can do after
Apply it via D3 to control animation length and share consistent timing across multiple selections.
How it connects
Connects D3 transitions with delay(), ease(), easing functions, and animated SVG attributes and styles.
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.