为什么使用缩放键的条形图与刻度线不对齐?

我正在按种族划分农民数量,农民数量在y轴上,种族在x轴上。对于我使用的x轴 d3.scaleBand() 这完美地创建了x轴,但当我添加条时,它们不会与记号对齐,除非我也调用 .paddingInner(1).paddingOuter(1) 像这样:

var xScale = d3.scaleBand()
        .domain(races)
        .rangeRound([0, width])
    //why do I need these lines?
      .paddingInner(1).paddingOuter(1);

在我看到的其他示例中,他们不必使用这些函数来运行图表: https://bl.ocks.org/d3noob/bdf28027e0ce70bd132edc64f1dd7ea4

这是我在密码笔里的密码 https://codepen.io/ericdjohnson/pen/6f7fda592032904943f0bdff0d9720a6/