d3 axes

Axes

d3 comes with built-in axes generators.

Axes

Axes are based on scales. d3 produces four different ones:

d3.axisTop(scale);
d3.axisRight(scale);
d3.axisBottom(scale);
d3.axisLeft(scale);
    

Axes

They can be called into existence from a selection:

var myScale = d3.scaleLinear()...;

var myAxis = d3.axisLeft(myScale);
svg.append("g")
  .call(myAxis);
      

Axes

Let's try them out: code/d3-scales/03_axes_missing.html.

Axes config

Axes config

ticks is useful for configuring the axis generator:

var myAxis = d3.axisLeft(myScale);
// use 5 ticks:
myAxis.ticks(5);
// format ticks:
myAxis.ticks(5, "s")
        

Axes config

d3 formatting:

Axes config

Axes config

Use tickValues to explicitly set ticks:

var myAxis = d3.axisLeft(myScale);
myAxis.tickValues([0, 0.5, 1]);