D3js Ordinal Axis does not show all the ticks

Question

I instantiate a ordinal scale in d3 and associate it to an axis. The axis is then appended to a SVG canvas on the page; here a snippet:

var arange = [1,2,3,4,5];
var ticks = ['one' , 'two', 'three', 'four', 'five'];

var myScale = d3.scale.ordinal();
myScale.range(arange)
   .domain(ticks);

var myAxis = d3.svg.axis()
       .scale(myScale)
       .orient("bottom");

canvas.append("g")
.attr("class", "time axis")
.attr("transform" , "translate ("+myOrigin[0]+" , "+myOrigin[1]+")")
    .call(myAxis);

If I later change the scale (adding another tick and a corresponding range, ie arange = [1,2,3,4,5,6] and ticks = ['one' , 'two', 'three', 'four', 'five', 'six']) the length of the axis is right reaching the new range but not all the ticks are drawn: some at the end are somehow lost.

Could you please enlighten me?

Answer 1

The only way to force D3 to display all labels is to explicitly set them to be the tick values. In your case, this would like this:

var myAxis = d3.svg.axis()
   .scale(myScale)
   .tickValues(ticks)
   .orient("bottom");