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直到找到所需的結果。