Remove end-ticks from D3.js axis

Question

I'm using (the excellent) D3.js to generate some plots, and I can't find a way to remove the end ticks from the x and y axis.

Take the y-axis for example.

When the end tick value coincides with a label, I'm ok with having it.

But when the last round label is below the end of the plot, I get two ticks, one for the last rounded label and one above it at the end of the y-axis.

I don't want this end-tick visible, because I find the fact that it appears in less than the regular interval between labels distracting.

See here for an example of what I'm describing, the ticks at 0 and 15 are the end ticks:

15 ─┐ 
    | 
10 _| 
    |
5  _|
    |
0  ─┤──────

Any tips?

P.S As a response suggested, I could set the ticks explicitly. But I like the convenience of the implicit generated ticks, just don't want unlabelled ticks to pollute the axis. So an ideal solution (if exists) would also take than into account.

Answer 1

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)

Answer 2

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.