D3.js 为什么使用缩放键的条形图与刻度线不对齐？

我正在按种族划分农民数量，农民数量在y轴上，种族在x轴上。对于x轴，我使用的是

d3.scaleBand（）

，它完美地创建了x轴，但当我添加条时，它们不会与记号对齐，除非我也调用

.paddingner（1）.paddingOuter（1）

，如下所示：

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

在我看到的其他示例中，他们不必使用这些函数来让图表正常工作：

这是我在密码笔里的密码

---

当您选择

var barWidth=20

并通过

-barWidth/2

转换条形图的

x

属性时，这与其说是一个要求，不如说是一个设计选择。您可以通过在0和1之间操纵填充并让

xScale

完成它的工作来生成类似的图形：

实际上不需要这样做。您已经在条上设置了条宽和x属性，使得填充是将条移回行的唯一剩余内容。我正在使用

.attr（'x'，d=>xScale（d.race）-barWidth/2）

设置x属性。。。我应该用什么来代替呢？将

barwidth

更改为

xScale.bandwidth（）

并从x属性

-barwidth/2

中删除，您将看到不同之处。对不起，它不允许我用私人代码笔来说明。啊，好的，我将发布它。。。