title: How to create histogram with fixed bin width in D3.js v4?
body: <p>Starting from <a href="http://bl.ocks.org/mbostock/3048450" rel="nofollow noreferrer">the official D3.js v4 histogram example</a>, I want to display a histogram of iris "PetalLength" values.</p>
  
  <p>See <a href="http://codepen.io/netzwerg/pen/KNOYBy" rel="nofollow noreferrer">http://codepen.io/netzwerg/pen/KNOYBy</a></p>
  
  <p>My problem is that the last bin spans beyond the upper bound of the x-axis:</p>
  
  <p><a href="https://i.stack.imgur.com/jbTHZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jbTHZ.png" alt="enter image description here"></a></p>
  
  <p>When looking at the bins, this makes perfect sense: They all have a width of <code>1</code>, except for the last one, which only spans from <code>x0: 6</code> to <code>x1: 6.9</code>.</p>
  
  <p>Given that all svg rectangles are created with a fixed width (based on <code>bins[0]</code>), the overlap can be explained.</p>
  
  <p>I can manually make the x-range "nicer" (rounding to <code>7</code>):</p>
  
  <pre><code>var x = d3.scaleLinear()
        .domain(d3.extent(values))
        .rangeRound([0, width])
        .nice();
  </code></pre>
  
  <p>which "fixes" the problem.</p>
  
  <p>Alternatively, I could adjust the svg rectangle width calculation to be based on the <code>x0</code> and <code>x1</code> of each individual bin, which would draw the last bin with a narrower width.</p>
  
  <p>But ultimately, my question is:</p>
  
  <p>How do I tell <code>d3.histogram</code> to create bins which all have the same width?</p>