What does it take for .ticks() to work?

Question

.ticks() doesn\'t seem to be working on my bar chart. Can somebody take a look?

Here\'s the fiddle. I set ticks on the x-axis near the beginning of the object:

Answer 1

You can use a filter to decide which ticks to display:

var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues(x.domain().filter(function(d, i) { return !(i % 2); }))
    .orient("bottom");

The snipped above comes from this example.

Answer 2

I don't have enough reputation to add a comment to that first post but I think there is a misunderstanding.

The labels on the axis must be a multiple of 2, 5, or 10. The ticks function can take any number but it will modify that number to make sure the axis is a multiple of 2, 5, or 10.

For example, if the domain is 0-100 and you want 4 ticks (0, 33.33, 66.66, 100) it will round up to 6 to give you "pretty" numbers (0, 20, 40, 60, 80, 100). However, if you set ticks to 3 it will honor that and you'll have 0, 50, and 100.

Here's a post with Mike's explanation of this behavior.

It is still unclear to me why it won't count 0, 25, 50, 75, 100 if you set the ticks to 5 but I thought I'd try to clear up at least some of the confusion.

Answer 3

ticks can take only multiple of 2,5,10 not any number . That is why you might be having problem . Please take a look at this answer for custom ticks.link

Answer 4

A css-way to do this is to hide the nth axis elements you do not want. The d3 ticks, to me, is just perpetually annoying.

.tick:nth-of-type(6) > text {
    display: none;
  }
  .tick:nth-of-type(7) > text {
    display: none;
  }
  .tick:nth-of-type(8) > text {
    display: none;
  }