D3 linechart, can't edit the amount of ticks with an ordinal scale?

Question

I asked a question before about d3, and they suggested me to use an ordinal scale, this would solve my problems. Indeed it solved my problems, but know I'm stuck with another issue...

It draws perfectly, but my X-axis is full of text. As an example, I want: 1900 1904 1908 1912 ... but I got: 190119021903190419051906. As you can see this is not clear. (this is just an example, if there were only dates I could use another scale). Everywhere I looked they talk about axis.ticks(number). But this doesn't work. Nothing happens and I still get the same result. I hacked a result to get less results on the x-axis:

  var str = [];
  var i = 0;
  while(i < data.length) {
      str.push(data[i].age);
      i=i+8;
  }
  x.domain(str);

But if I do this it creates a random line and doesn't draw it perfectly anymore. Don't know how to solve this.. It's a simple line chart, nothing difficult, the only difficulty (for me) is the ordinal scale...

Hope someone can help me out.

this is how my x and x-axis is defined:

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width-150],1);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")

without the while-loop (the nasty hack), I just had the following line defining the x.domain:

x.domain(data.map(function(d) { return d.age; }));

Answer 1

Have a look at the documentation for axes, in particular the ticks() function. You can use it (or tickValues()) to control how many (and what) values you want to show.

If you're working with dates, you might want to use a time scale instead of the ordinal one. In particular it will allow you to control the ticks in a more meaningful way, e.g. specify that you want ticks every five years.