title: D3 bar chart - last bar overhangs the end of the X axis
body: <p>I have a D3 stacked bar chart that is working great except that the last bar overhangs the right side of X axis and the left side of the axis is not touching the Y axis.  This is because I had to move the bars so that they would be centered over the tick lines.  I thought that if I padded the time scale by a date on either end that would take care of it, but instead the bars just spread out to take up the available space.</p>
  
  <p>Here is a JSFiddle: <a href="http://jsfiddle.net/goodspeedj/cvjQq/" rel="nofollow">http://jsfiddle.net/goodspeedj/cvjQq/</a></p>
  
  <p>Here is the X scale: </p>
  
  <pre><code>var main_x = d3.time.scale().range([0, main_width-axis_offset - 5]);
  </code></pre>
  
  <p>This is my attempt to pad the X axis by a date on either end:</p>
  
  <pre><code>main_x.domain([
      d3.min(data.result, function(d) { 
          return d.date.setDate(d.date.getDate() - 1); 
      }), 
      d3.max(data.result, function(d) { 
          return d.date.setDate(d.date.getDate() + 1); 
      }
  )]);
  </code></pre>
  
  <p>The calculation for the x attribute on the bars is:</p>
  
  <pre><code>.attr("x", function(d) { return main_x(d.date) - (main_width/len)/2; })
  </code></pre>
  
  <p>This is a minor thing, but it is really annoying me.  Thanks!</p>