javascript - 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 inverval between labels distracting.

See here for an example of what I'm describing:

http://www.road2stat.com/cn/wp-content/attachments/2012/04/d3_interactive.png

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.

question from:https://stackoverflow.com/questions/13669239/remove-end-ticks-from-d3-js-axis

Answer 1

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.