title: d3 bar chart using rangeRoundBands - why is there outer padding?
body: <p>I'm creating a bar chart using an ordinal scale for the x axis, and using rangeRoundBands. I'm following this example: <a href="https://bl.ocks.org/mbostock/3885304" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/3885304</a></p>
  
  <p>However, my chart has outer padding -- big spaces at the beginning and end of the axis, where I'd like the bars to fully extend. The screen shot below shows the spaces I'm referring to circled in red.</p>
  
  <p><a href="https://i.stack.imgur.com/Jl58Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jl58Y.png" alt="screenshot of bar chart"></a></p>
  
  <p>How can I remove these spaces? I need my margins and the svg width and height to remain the same.</p>
  
  <p>Here is a Plunker with the chart as it is now:
  <a href="https://plnkr.co/edit/gMw7jvieKSlFbHLTNY9o?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/gMw7jvieKSlFbHLTNY9o?p=preview</a></p>
  
  <p>Code is also below:</p>
  
  <pre><code>&lt;!doctype html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
          .axis path{
              fill: none;
              stroke: #cccccc;
              stroke-width: 2px;
          }
          .x.axis text{
              display:none;
          }
          .bar{
              fill: blue;
          }
          body{
              font-family:Helvetica, Arial, sans-serif;
          }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="barchart"&gt;&lt;/div&gt;
  
      &lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
      var margin = {top: 20, right: 0, bottom: 50, left: 300},
          width = 800 - margin.left - margin.right;
              height = 465 - margin.top - margin.bottom;
  
      var x = d3.scale.ordinal()
                  .rangeRoundBands([0, width], .5);
      var y = d3.scale.linear().range([height, 0]);
  
      var yAxis = d3.svg.axis().scale(y)
          .orient("left").ticks(5);
  
      var xAxis = d3.svg.axis().scale(x)
              .orient("bottom");
  
      var barsvg = d3.select("#barchart")
          .append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
          .append("g")
              .attr("class", "barchartbox")
              .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");
  
      // Get the data
        d3.json("population.json", function(error, data1) {
  
          x.domain(data1.map(function(d) { return d.country; }));
        y.domain([0, d3.max(data1, function(d) { return d.value; })]);
  
        barsvg.selectAll(".axis").remove();
  
        // Add the Y Axis
        barsvg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
  
        // Add the X Axis
        barsvg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
  
        var bars = barsvg.selectAll(".bar")
            .data(data1);
  
          bars.enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d.country); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) {return y(d.value); })
            .attr("height", function(d) { return height - y(d.value); });
  
          bars.exit().remove();
  
      });
  
  
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>