d3.js - D3js X 轴向下舍入某些浏览器宽度的刻度

Question

我正在使用 d3js v5，折线图上的 X 轴有一个序数刻度。

this.x = scaleOrdinal()
  .domain(axisXDataTruncated.labels)
  .range(axisXDataTruncated.range);

当我使用这个绘制我的 x 轴时：

 this.root
    .append('g')
    .attr('class', 'x axis')
    .attr('transform', `translate(0, ${this.height})`)
    .call(
      axisBottom(this.x).tickFormat((data: string | number) =>
        formatter(
          this.graphDataMerged.lineChartOptions.axis.x.format,
          data,
          this.graphDataMerged.lineChartOptions.axis.x.currency
        )
      )
    );

我正在使用字符串标签 (['Week 1'. 'Week 2',... 'Week 26'] 作为标签。

当我有很多标签时，x 轴会丢弃最后一个标签并裁剪到某个值。例如，有 26 个值。Tha 最后一个标签显示为 25，显示在 x 轴的最末端。

因为我图表的点和线包括位置 26 的值，所以轴和点不匹配。

如果我扩大浏览器的宽度，x 轴的最后一个值会神奇地出现。

我可能做错了什么？这是v5中的错误吗？

标签： d3.js