liveBook · Manning

axisTop()

As explained in D3.js in Action, Third Edition

axisTop() is a D3 axis generator function that creates an axis positioned above its associated scale.

axisTop() is a D3 axis generator that creates an axis positioned above its associated scale. It belongs to the d3-axis module. section 4.1.2

Use axisTop() by following the standard D3 axis workflow:

  • Pass a scale to the generator so it can distribute values along the axis. section 4.1.2
  • Append a group to the chart selection and call the generator on that group. section 4.1.2
  • Position the group within the chart layout, using margins when the surrounding chart needs reserved space. section 4.5

Top axis in a chart

In a temperature line chart, pair axisTop() with the scale that distributes the chart’s values, append the axis to an SVG group, and call the generator there. The generated output includes an axis line, ticks, and labels. section 4.1.2 section 4.5

const maxTemp = d3.max(data, d => d.max_temp_F);
const yScale = d3.scaleLinear()
  .domain([0, maxTemp])
  .range([innerHeight, 0]);

Review a scale definition before supplying it to an axis generator. section 4.1.2

How D3.js in Action, Third Edition covers it

How deep it goes
Defines the generator, scale input, selection call, and SVG output without detailing axis-specific styling.
Examples
Uses temperature line charts, time scales, tick labels, SVG groups, and chart margins as implementation examples.
What it assumes
Assumes initialized scales, D3 selections, SVG groups, and familiarity with positioning chart elements through transforms or margins.
What you can do after
Apply it via D3 to generate an upper axis from a scale and render it inside an SVG selection.
How it connects
Connects D3 scales, SVG groups, selections, the call() method, and the D3 margin convention.
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

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.