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调整，直到找到所需的结果。