Quiero crear un gráfico de barras utilizando cadenas como las etiquetas para las marcas en el eje x (por ejemplo, Año 1, Año 2, etc. en lugar de 0,1,2, etc.).

Comencé usando los valores numéricos para el eje x (por ejemplo, 0,1,2,3, etc.) de la siguiente manera:

1) genero mis rangos:

     x = d3.scale.ordinal()
        .domain(d3.range(svg.chartData[0].length)) //number of columns is a spreadsheet-like system
        .rangeRoundBands([0,width], .1); 


     y = d3.scale.linear()
        .domain(Math.min(d3.min(svg.chartData.extent),0), Math.max(d3.min(svg.chartData.extent),0)]) 
        .range([height, 0])
        .nice();

2) Hacer los ejes:

     d3.svg.axis()
        .scale(x);

3) Redibujar los ejes:

     svg.select(".axis.x_axis")
        .call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0));

Esto funciona bien con las etiquetas del eje numérico por defecto.

Si intento usar una serie de cadenas para x tickValues ​​como este ...

     d3.svg.axis()
        .scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.]

... cuando vuelvo a dibujar el gráfico (con o sin cambios en los datos / configuraciones), las etiquetas se intercambian de esta forma.

Observe cómo Col 1 toma el lugar de Col 0 y viceversa.

¿Sabes por que pasa esto?