title: d3.js - how to draw x-axis for stacked bar chart
body: <p>I am adding an x-axis as time scale instead of the ordinal scale to the stacked bar chart with the month-year format as values. The ticks in x-axis is not aligned correctly:</p>
  
  <p>My code is :</p>
  
  <pre><code>          &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Scanned vs Non Scanned Data&lt;/title&gt;
  
      &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="../../js/Core_functions.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="../../js/graphic_functions.js"&gt;&lt;/script&gt;
  
  
      &lt;style type="text/css"&gt;
  
  svg {
    width: 980px;
    height: 500px;
    border: solid 1px #ccc;
    font: 10px sans-serif;
    shape-rendering: crispEdges;
  }
  
  label {  
      display: inline-block;  
      cursor: pointer;  
      position: relative;
      padding-left:1px;  
      margin-right: 5px;  
      font-size: 13px;  
  }  
  
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div id="container"&gt;
  
  &lt;h1&gt;Mockup of Component Scanned Mapping DV&lt;/h1&gt;
  &lt;input type="checkbox" id = "fr"&gt;
  &lt;label for="fr"&gt;F&amp;R&lt;/label&gt;  
  
  &lt;input type="checkbox" id = "ip"&gt; 
  &lt;label for="ip"&gt;IP&amp;Science&lt;/label&gt;  
  
  &lt;input type="checkbox" id = "ggo"&gt; 
  &lt;label for="ggo"&gt;GGO&lt;/label&gt;  
  
  &lt;input type="checkbox" id = "reuters"&gt;
  &lt;label for="reuters"&gt;Reuters&lt;/label&gt;  
  
  &lt;input type="checkbox" id = "legal"&gt;
  &lt;label for="legal"&gt;Legal&lt;/label&gt;
  
  &lt;br&gt;
  &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
  
  
  var w = 960,
      h = 500,
      p = [20, 50, 30, 20],
      //x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]),
      x = d3.time.scale().range([1, 80]);
  
      y = d3.scale.linear().range([0, h - p[0] - p[2]]),
      z = d3.scale.ordinal().range(["#819FF7", "#CB491A"]),
      parse = d3.time.format("%m/%Y").parse,
      format = d3.time.format("%b-%y");
  
      var xAxis=d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .ticks(d3.time.month, 1)
                //.ticks(12)
  
  
  
     xAxis.tickFormat(d3.time.format("%b-%y"));
  
  
      /*var yAxis = d3.svg.axis()
      .scale(y)
      .ticks(12)
      .orient("left");*/
  
  var svg = d3.select("#container").append("svg:svg")
      .attr("width", w)
      .attr("height", h)
    .append("svg:g")
      .attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")");
  
  d3.csv("scandata.csv", function(scan) {
  
    // Transpose the data into layers by cause.
    var scantypes = d3.layout.stack()(["scanned", "unscanned"].map(function(scans) {
      return scan.map(function(d) {
        return {x: parse(d.date), y: +d[scans],z:d.compid,typescan:scans};
      });
    }));
  
  
    //console.log(scantypes);
  
    // Compute the x-domain (by date) and y-domain (by top).
    x.domain(scantypes [0].map(function(d) { return d.x; }));
    y.domain([0, d3.max(scantypes[scantypes .length - 1], function(d) { return d.y0 + d.y; })]);
  
    // Add a group for each cause.
    var cause = svg.selectAll("g.scan")
        .data(scantypes)
      .enter().append("svg:g")
        .attr("class", "scan")
        .style("fill", function(d, i) { return z(i); })
        .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });
  
    // Add a rect for each date.
    var rect = cause.selectAll("rect")
        .data(Object)
      .enter().append("svg:rect")
        .attr("id", function(d,i) { return i + " comp " + d.z;  })
        .attr("x", function(d,i) { 
                          if (i ==0) 
                          { 
                              return x(d.x) ;//+ 10
                          } 
                          else 
                          {
                              return x(d.x);//-5
                          }} )
        .attr("y", function(d) { return -y(d.y0) - y(d.y); })
        .attr("height", function(d) { return y(d.y); })
        .attr("width", 30)//x.rangeBand()/2
      .on("mouseover", function(d){
  
                     return tooltip.style("visibility", "visible")
                                     .text((d.y))//d.typescan + " -  " + 
                                     .style("left", (d3.event.pageX) + "px") 
                                     .style("top", (d3.event.pageY - 20) + "px");      ;})
        .on("mousemove", function(d){
  
                        return tooltip.style("visibility", "visible")
                                     .text((d.y)) //d.typescan + " -  " + 
                                     .style("left", (d3.event.pageX) + "px") 
                                     .style("top", (d3.event.pageY - 20) + "px");      ;})
  
        .on("mouseout", function(d){return tooltip.style("visibility", "hidden");}) 
        .on("click", function(d){});
  
  
  
    var tooltip = d3.select("#container")
      .append("div")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "visible")
      .text("Scanned vs UnScanned")
      .style("font", "Arial")
        .style("color", "white")
      .style("font-size", "14px");
  
    //Add x-Axis
      svg.append("g")
      .attr("class", "x axis")
      //.attr("transform", function(d) { return "translate(0,0)"; })
      .call(xAxis)
  
  
  
  
    // Add a label per date.
    var label = svg.selectAll("text")
        .data(x.domain())
      .enter().append("svg:text")
        .attr("x", function(d) { console.log(x.domain()/10);return eval(x(d.x)/12) ; })//x.rangeBand() / 4
        .attr("y", 6)
        .attr("text-anchor", "middle")
        .attr("dy", ".71em")
        .text(format);
  
    // Add y-axis rules.
    var rule = svg.selectAll("g.rule")
        .data(y.ticks(5))
      .enter().append("svg:g")
        .attr("class", "rule")
        .attr("transform", function(d) { return "translate(0," + -y(d) + ")"; });
  
    rule.append("svg:line")
        .attr("x2", w - p[1] - p[3])
        .style("stroke", function(d) { return d ? "#fff" : "#000"; })
        .style("stroke-opacity", function(d) { return d ? .7 : null; });
  
    rule.append("svg:text")
        .attr("x", -15)
        .style("font-family","Arial 12px")
        .attr("dy", ".25em")
        .text(d3.format(",d"));
  
  
  var Rectangles = [
     { "x_axis": 870, "y_axis": -400,"color" : "#819FF7"},
     { "x_axis": 870, "y_axis": -440,"color" : "#CB491A"}];
  
  
  var rectangle= svg.selectAll("#container").data(Rectangles).enter().append("rect");
  
  var RectangleAttrb = rectangle.attr("x", function (d) { return d.x_axis; })
                         .attr("y", function (d) { return d.y_axis; })
                         .attr("width",30 )
                 .attr("height",20)
                         .style("fill", function(d) { return d.color; });
  
  
  var text = svg.append('text').text('Scanned')
             .attr('x', 904)
             .attr('y', -390)
         .attr("style", "font-size: 18; font-family: Helvetica,sans-serif")
             .attr('fill', 'black')
  
  var text = svg.append('text').text('UnScanned')
                .attr('x',904)
                .attr('y', -430)
            .attr("style", "font-size: 18; font-family: Helvetica,sans-serif")
                .attr('fill', 'black')
  
  
  
  });
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;    &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What is the error in this code? How do i align the x-axis labels to the bars?</p>
  
  <p>My csv data is :</p>
  
  <pre><code>date,scanned,unscanned,compid,sbu
  01/2014,10,90,101,f&amp;r
  02/2014,55,40,101,f&amp;r
  03/2014,45,23,101,f&amp;r
  04/2014,65,35,101,f&amp;r
  05/2014,100,20,101,f&amp;r
  06/2014,50,30,101,f&amp;r
  07/2014,10,90,101,f&amp;r
  08/2014,22,48,101,f&amp;r
  09/2014,0,100,101,f&amp;r
  10/2014,3,97,101,f&amp;r
  11/2014,22,60,101,f&amp;r
  12/2014,57,37,101,f&amp;r
  </code></pre>
  
  <p>I made the following changes:</p>
  
  <pre><code>x = d3.time.scale().range([1, 80]);
  </code></pre>
  
  <p>Also</p>
  
  <pre><code>var rect = cause.selectAll("rect")
        .data(Object)
      .enter().append("svg:rect")
        .attr("id", function(d,i) { return i + " comp " + d.z;  })
        .attr("x", function(d,i) { 
                          if (i ==0) 
                          { 
                              return x(d.x) ;
                          } 
                          else 
                          {
                              return x(d.x);
  </code></pre>