使用 d3 v6 在列下方居中的 scalesBand 获取 x 轴上的刻度 编辑：问题已解决原帖代码结果我需要在这里使用 timeScale 吗？

如何解决使用 d3 v6 在列下方居中的 scalesBand 获取 x 轴上的刻度 编辑：问题已解决原帖代码结果我需要在这里使用 timeScale 吗？

编辑：问题已解决

苦涩的见解：我做错了翻译：轴错误地向右移动。 解决方案 .attr('transform',translate(0,${input.height - margins.current.bottom}))

原帖

我不明白如何让我的 x 轴的刻度位置正确。刻度应位于列正下方居中。

使用 d3 我正在为列的正确宽度创建一个 band scale，我想将它重用于 x 轴。

代码

// data
data [
  {
    "year": "2021","value": 7.81335178927304
  },{
    "year": "2022","value": 7.103485903424945
  },{
    "year": "2023","value": 6.393620017576849
  }
  // [...]
]

// original band scale
const xScale = scaleBand()
    .domain(yearsData.map((d) :string => d.year))
    .rangeRound([0,(input.width - margins.current.left - margins.current.right)])
    .padding(0.1);

// creating the x-axis
const xAxis = axisBottom(xScale.copy().padding(0.5).align(0));
const xAxisGroup = chartGroup.append('g')
    .attr('class','x-axis')
    .call(xAxis)
    // move the whole axis down,variables do not matter here
    .attr('transform',`translate(${margins.current.left},${input.height - margins.current.bottom})`)

结果

我需要在这里使用 timeScale 吗？

在复制的波段刻度上设置填充的不同方法会产生不同的结果，但不会产生居中的刻度。另外我想知道左边的第一个刻度，为什么在那里？尝试 point scale 也没有用。