title: d3 rangeRoundBands Padding
body: <p>Another d3 question here...</p>
  
  <p>I am reworking the bar chart I finished building because I had so many components and so many redundant transitions due to my improper use of the each() method that the performance was really terrible...which kinda defeats the purpose of using it in the first place!</p>
  
  <p>But in any case, I have been closely following mbostock's <a href="http://bl.ocks.org/mbostock/1134768" rel="nofollow">stacked bar graph tutorial</a>, but have run into an issue trying to pad my bars from each other. </p>
  
  <p>The relevant code is below:</p>
  
  <pre><code>var barWidth = (2.7*chartWidth)/(3.7*array.length - 1);
      //font size for bar labels
      var barNumberSize = (16.0 / 27) * barWidth;
      //font size for bubbles
      var bubbleNumberSize = (12.0 / 27) * barWidth;
      var barPadding = barWidth / 2.7;
      var maxBarHeight = chartHeight;
      var bubbleRadius = barWidth / 2;
  
      // create the svg object for the whole graphic
      var svg = d3.select('body')
          .append('svg')
          .attr('class','graphic')
          .attr('width', svgWidth)
          .attr('height', svgHeight)
  
      //create the section for the bar chart itself
      var chart = svg.append("g")
          .attr('width', chartWidth)
          .attr('height', chartHeight)
          .attr('class', 'chart')
          //make room for axes, etc.
          .attr('transform', 'translate(' + chartPaddingX + ',' + (chartHeight - chartPaddingY) + ')');
  
  var x = d3.scale.ordinal()
          .rangeRoundBands([0,chartWidth],10),
      y = d3.scale.linear()
          .range([0, maxBarHeight]),
      z = d3.scale.ordinal().range(['rgb(41,41,41)','rgb(238,77,77)'])
      parse = d3.time.format("%m/%y").parse,
      format = d3.time.format("%b");
  
  var results = d3.layout.stack()(["without","with"].map(function(result) {
      return array.map(function(d) {
          return {x:parse(d.date) , y:d[result]};
      });
  }));
  
  x.domain(results[0].map(function(d) { return d.x; }));
  y.domain([0, d3.max(results[results.length - 1], function(d) { return d.y0 + d.y; })]);
  
  var result = chart.selectAll("g.result")
      .data(results)
      .enter().append("svg:g")
      .attr("class", "result")
      .style("fill", function(d, i) { return z(i); })
      .style("stroke", function(d, i) { return z(i) });
  
  var rect = result.selectAll("rect")
      .data(Object)
      .enter().append("svg:rect")
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return - y(d.y0) - y(d.y); })
      .attr("height", function(d) { return y(d.y); })
      .attr("width", x.rangeBand());
  </code></pre>
  
  <p>My issue is that this line</p>
  
  <pre><code>var x = d3.scale.ordinal()
         .rangeRoundBands([0,chartWidth]),
  </code></pre>
  
  <p>works fine, while this line (setting the bars' padding as 10px)</p>
  
  <pre><code>var x = d3.scale.ordinal()
         .rangeRoundBands([0,chartWidth],10),
  </code></pre>
  
  <p>causes all my bars to disappear. An inspection with firebug reveals that, somehow, the width of all the bars changes to -180px (instead of 30px) when I set a value for padding.</p>
  
  <p>I can't seem to figure out where this bug is stemming from...any help would be much appreciated!</p>