title: D3 - using strings for axis ticks
body: <p>I want to crate a bar chart using strings as the labels for the ticks on the x-axis (e.g., Year 1, Year 2, etc instead of 0,1,2, etc).</p>
  
  <p>I started by using the numeric values for the x-axis (e.g., 0,1,2,3, etc) as follows:</p>
  
  <p>1) I generate my ranges:</p>
  
  <pre><code>     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();
  </code></pre>
  
  <p>2) Make the axes:</p>
  
  <pre><code>     d3.svg.axis()
          .scale(x);
  </code></pre>
  
  <p>3) Redraw the axes:</p>
  
  <pre><code>     svg.select(".axis.x_axis")
          .call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0));
  </code></pre>
  
  <p>This works well with default numeric axis labels.</p>
  
  <p>If I try to use an array of strings for the x tickValues like this....</p>
  
  <pre><code>     d3.svg.axis()
          .scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.]
  </code></pre>
  
  <p>... when I redraw the chart (with or without changes to the data/settings), the labels swap like this.</p>
  
  <p><img src="https://i.stack.imgur.com/Q23TY.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/f8BHh.png" alt="enter image description here"></p>
  
  <p>Notice how Col 1 takes the place of Col 0 and vice versa.</p>
  
  <p>Do you know why this happens?</p>