title: Chart bars not aligning with x axis values in d3.js
body: <p>Trying to learn and <em>implement</em> <a href="https://d3js.org" rel="nofollow noreferrer">d3.js</a> for the first time.</p>
  
  <p>In the fiddle, we needed to <em>reduce the width of each bar</em> from </p>
  
  <p><a href="https://jsfiddle.net/xameeramir/499q0un9/" rel="nofollow noreferrer"><code>.attr('width', xScale.rangeBand())</code></a> line 46</p>
  
  <p>to </p>
  
  <p><a href="https://jsfiddle.net/xameeramir/nmjxx6t0/" rel="nofollow noreferrer"><code>.attr('width', '10')</code></a> line 50</p>
  
  <p>When doing so, the horizontal x axis labels are getting <strong>dis-aligned with vertical bars</strong> which is not needed.</p>
  
  <p>Tried to see a few solutions:</p>
  
  <ul>
  <li>We're unable to see <a href="https://stackoverflow.com/a/36067544/2404470"><code>tickValues</code></a> anywhere in my code.</li>
  <li>Unable to understand where to put <a href="https://stackoverflow.com/a/18354563/2404470"><code>SVG-Text</code></a></li>
  <li>We do not wish to <a href="https://stackoverflow.com/q/35407263/2404470">hide the x axis labels</a></li>
  <li>Ours is numeric, they're <a href="https://stackoverflow.com/a/29926272/2404470">discussing about date time kind of axis</a></li>
  </ul>
  
  <p><em>Any suggestions, kind folks?</em></p>