title: d3.js scaleBand()'s ticks coming out of place
body: <p>I am using scaleBand() for both x and y axes for a bar chart. For some reason, the height of the bars are in between the ticks of the y axis. I would appreciate any help. Here is my code:</p>
  <pre><code>    var margin_ = { top: 20, right: 20, bottom: 30, left: 40 },
          width_ = 960 - margin_.left - margin_.right,
          height_ = 500 - margin_.top - margin_.bottom;
  
      var svg_ = d3.select(&quot;body&quot;).append(&quot;svg&quot;)
          .attr(&quot;width&quot;, width_ + margin_.left + margin_.right)
          .attr(&quot;height&quot;, height_ + margin_.top + margin_.bottom)
          .append(&quot;g&quot;)
          .attr(&quot;transform&quot;,
              &quot;translate(&quot; + margin_.left + &quot;,&quot; + margin_.top + &quot;)&quot;);
  
  
      var x = d3.scaleBand()
          .range([0, width_])
          .padding(0.2)
  
      var y = d3.scaleBand()
          .range([height_, 0]);
  
  
      x.domain(satisfactScaleKeyValues);
      y.domain(graphYvalues);
  
  
      svg_.selectAll(&quot;.bar&quot;)
          .data(datas)
          .enter().append(&quot;rect&quot;)
          .attr(&quot;class&quot;, &quot;bar__&quot;)
          .attr(&quot;x&quot;, function (d) { return x(d.variable); })
          .attr(&quot;width&quot;, x.bandwidth())
          .attr(&quot;y&quot;, function (d) { return y(d.satisLevel); })
          .attr(&quot;height&quot;, function (d) { return height_ - y(d.satisLevel); });
  
  
      // add the x Axis
      svg_.append(&quot;g&quot;)
          .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height_ + &quot;)&quot;)
          .call(d3.axisBottom(x));
  
      // add the y Axis
      svg_.append(&quot;g&quot;)
          .call(d3.axisLeft(y))
  </code></pre>
  <p><a href="https://i.stack.imgur.com/yK5Ia.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yK5Ia.png" alt="enter image description here" /></a></p>