How do properly use an array label names for a custom axis on D3?

Question

I'm trying to make custom labels for my x-axis on D3. My current solution throws in the array elements randomly, but I'd like it to be in a specific order. How can this be done properly in with tickformat? My current code is pasted below:

        var formatAxis = function(d) {
           return arr[d % arr.length];      
        }

        xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .tickValues(createTickValuesArray(arr.length))
            .tickFormat(formatAxis);

Help would be greatly appreciated.

Answer 1

If you want the tick labels to be returned in the same order as in the array, you can use the index explicitly:

var formatAxis = function(d, i) {
       return arr[i];      
    }