D3柱状图左对齐x轴

Question

如何保持x轴为容器宽度的100%，同时保持左对齐的一些填充刻度

  this.xAxis = d3.scaleBand()
            .range([0, this.barWidth * this.data.length], 1);

如果我将range更改为.range([0, this.svgWidth])，宽度是正确的，但我的刻度均匀分布，这不是我想要的结果。

Answer 1

当您使用波段刻度时，在range中不再接受第二个和第三个参数。相反，您必须使用paddingInner和paddingOuter。

那么，把你的代码段改成这样:

this.xAxis = d3.scaleBand()
    .range([0, this.svgWidth])
    .paddingInner(someValue)
    .paddingOuter(someValue);

调整someValue直到你找到想要的结果。