title: How do I set custom ticks along the Xaxis in D3? or name the bars in a bar chart?
body: <p>I'm trying to create a bar chart with custom values for each bar along the xAxis in D3, and thought I'd try to use the tickValues. Just to try it out I gave it some dummy data but it doesn't work like this:</p>
  
  <pre><code>  var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom")
  
      .tickValues(['hi','b','c','d','e']);
  </code></pre>
  
  <p>Here's the xScale:</p>
  
  <p>gon.votes.length is an array of total votes counts for EACH answer and functionally is there only to return how many bars there will be for a specific survey question(this is a survey app fyi)</p>
  
  <pre><code>  var xScale = d3.scale.linear()
      .domain([0,gon.votes.length])
      .range([0,w]);
  </code></pre>
  
  <p>Finally, when I call </p>
  
  <pre><code>function(d){ return d.title}
  </code></pre>
  
  <p>This will extract the appropriate title for each bar.</p>
  
  <p>Also here is the html of the ticks of the xAxis that gets rendered:
      NaN</p>
  
  <p>Any tips on how to put this along the xAxis?  Is trying to modify the ticks the wrong approach?</p>