Remove end-ticks from D3.js axis

The axis.tick* functions can help you there. You have a number of possibilities to prevent the behaviour you're describing. You could set the ticks explicitly using the tickValues() function. Or you could set the size of the end ticks to 0 using tickSize(). You can also control the underlying scale using the ticks() function.

Depending on your particular scenario, one of these options may make more sense than the others.

In d3.js v4.x use .tickSizeOuter(0), like:

self._leftAxis = d3.axisLeft(self._y)
      .tickSizeInner(3) // the inner ticks will be of size 3
      .tickSizeOuter(0); // the outer ones of 0 size

Note that the zero tick below is considered a inner on

This d3.js v4 doc: https://github.com/d3/d3-axis

For anyone who got to this question because all you want to do is remove the two end ticks from an axis, this will do the trick:

.outerTickSize(0)

Add that to any axis call you make, such as:

d3.svg.axis().outerTickSize(0)