Learn D3.js

Configuring ticks

A tick is a <g> object of the tick class that contains a <line> element and a <text> element. You can use D3 to select these elements and configure them any way you wish. For example, one way to change the tick size is to select the line and change its y2 attribute:

d3.selectAll(".tick line").attr("y2", 25);

But then you need to do the same with the text labels, set adequate margins, and deal with the outer ticks, since they are actually part of the axis's domain path. A simpler way to do this is by using the tickSize() method:

d3.axisBottom(scaleX).tickSize(25);

This will make all ticks the same size and move the labels, while preserving the margins, as shown in the following screenshot:

Applying the tickSize() method ...