title: Creating a Text Labeled x-Axis with an Ordinal Scale in D3.js
body: <p>I'm building a bar chart in d3.js with an ordinal x-axis whose ticks should label the chart with text. Could anyone explain how the ordinal scale "maps" x ticks to the corresponding bar positions?  Specifically, if I want to designate the x tick labels with an array of text values to the corresponding bars in a bar chart.</p>
  
  <p><strong>Currently I'm setting the domain as the following:</strong></p>
  
  <pre><code>    var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"];
      var xScale = d3.scale.ordinal()
                  .domain(labels)
  </code></pre>
  
  <p>However, values of 1-19 are showing after the text labels.</p>
  
  <p><strong>As seen in this fiddle:</strong></p>
  
  <p><a href="http://jsfiddle.net/chartguy/FbqjD/" rel="noreferrer">http://jsfiddle.net/chartguy/FbqjD/</a></p>
  
  <p><strong>Associated Fiddle Source Code:</strong></p>
  
  <pre><code>//Width and height
              var margin = {top: 20, right: 20, bottom: 30, left: 40};           
              var width = 600 - margin.left - margin.right;
              var height= 500-margin.top -margin.bottom;
              var w = width;
              var h = height;
  
  
              var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                              11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
  
              var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"];
              var xScale = d3.scale.ordinal()
              .domain(labels)
                              .rangeRoundBands([margin.left, width], 0.05);
              var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
  
  
              var yScale = d3.scale.linear()
                              .domain([0, d3.max(dataset)])
                              .range([h,0]);
  
  
              //Create SVG element
              var svg = d3.select("body")
                          .append("svg")
                          .attr("width", w)
                          .attr("height", h);
  
              //Create bars
              svg.selectAll("rect")
                 .data(dataset)
                 .enter()
                 .append("rect")
                 .attr("x", function(d, i) {
                      return xScale(i);
                 })
                 .attr("y", function(d) {
                      return yScale(d);
                 })
                 .attr("width", xScale.rangeBand())
                 .attr("height", function(d) {
                      return h - yScale(d);
                 })
                 .attr("fill", function(d) {
                      return "rgb(0, 0, 0)";
                 });
  
              svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + 0 + ")")
        .call(xAxis);
  
              //Create labels
              svg.selectAll("text")
                 .data(dataset)
                 .enter()
                 .append("text")
                 .text(function(d) {
                      return d;
                 })
                 .attr("x", function(d, i) {
                      return xScale(i) + xScale.rangeBand() / 2;
                 })
                 .attr("y", function(d) {
                      return h - yScale(d) + 14;
                 });
  </code></pre>