liveBook · Manning

tickSize()

As explained in D3.js in Action, Third Edition

tickSize() is a D3 axis method that gets or sets the length of an axis's tick marks.

tickSize() is a D3 axis method that gets or sets the length of an axis’s tick marks. Extending ticks across the chart turns them into a grid. section 5.2.3

Create a horizontal grid

For a bottom axis, set the tick length to the negative inner chart height: bottomAxis.tickSize(innerHeight * -1). The ticks then extend upward behind the streamgraph. section 5.2.3

const bottomAxis = d3.axisBottom(xScale)
  .tickValues(d3.range(1975, 2020, 5))
  .tickSizeOuter(0)
  .tickSize(innerHeight * -1);

This listing combines tickValues(), tickSizeOuter(), and tickSize() in a bottom-axis configuration. section 5.2.3

How D3.js in Action, Third Edition covers it

How deep it goes
Shows the implementation value and direction of tick length, but does not detail the method’s full API behavior.
Examples
Uses a bottom axis whose ticks extend across the inner height of a streamgraph.
What you can do after
Apply tickSize() in D3 to turn axis ticks into horizontal or vertical chart grids.
How it connects
Connects axis ticks with tickValues(), tickSizeOuter(), SVG drawing order, and CSS opacity.
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.