score:7

Accepted answer

The line

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

Is setting the domain for the scale that the axis uses. Because the scale is ordinal the axis defaults to using all the values for ticks. You should be able to set the actual tick values using the axis.tickValues function you mention above. You will just have to set it after the call that sets the scale domain because I suspect setting the domain resets the tickValues. Simply add something like:

xAxis.tickValues(data.map( function(d,i) 
  { 
    if(i % 2 ===0 ) return d.State; 
  })
    .filter(function (d) 
      { return !!d; } ));

Here I am mapping the data data to a single array of selected State values interspersed with "undefined" and then filtering out all the undefineds. The remaining State values become the ticks.

If you are using underscore you can probably make the line a lot prettier.

You can see the working solution here.


Related Query

More Query from same tag