liveBook · Manning

tickFormat()

As explained in D3.js in Action, Third Edition

tickFormat() is a D3 axis method that specifies the formatting function or format for tick labels.

tickFormat() specifies how D3 axis tick labels are displayed. Pass it a formatting function such as d3.timeFormat() to control time labels. section 4.1.2

Format months on a time axis

const bottomAxis = d3.axisBottom(xScale) .tickFormat(d3.timeFormat("%b")); Using "%b" displays abbreviated month names, such as Jan, at the x-axis ticks. section 4.1.2

const bottomAxis = d3.axisBottom(xScale)
  .tickFormat(d3.timeFormat("%b"));

Inspect the complete axis declaration that chains tickFormat() with d3.timeFormat("%b"). section 4.1.2

How D3.js in Action, Third Edition covers it

How deep it goes
Explains passing d3.timeFormat() to the axis, while deferring the complete format-specifier list to the module.
Examples
Uses a 2021 time axis whose tick labels change from a default year representation to abbreviated month names.
What it assumes
Assumes a D3 time scale and axis already exist, while demonstrating the formatting choice directly.
What you can do after
Apply axis label formatting with d3.timeFormat() to produce clearer time-based visualizations.
How it connects
Connects D3 axes with d3-axis, d3-time-format, time scales, and JavaScript Date objects.
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.