为什么使用scaleBand的条形图不与我的刻度线对齐？

Question

我正按照种族划分农民数量，农民数量在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

这是我在codepen中的代码 https://codepen.io/ericdjohnson/pen/6f7fda592032904943f0bdff0d9720a6/

Answer 1

当您创建var barWidth = 20然后将栏x属性翻译为- barWidth/2时，这不是设计选择的要求。您可以通过操纵0和1之间的填充并让xScale执行它来生成类似的图形：https://codepen.io/mortonanalytics/pen/baxVNZ