求助：D3.js堆叠柱状图柱子渲染重叠问题排查

问题说明 #

使用D3.js实现堆叠柱状图时，出现柱子相互重叠的情况，推测问题出在x轴配置，但无法定位具体错误。

错误效果：

预期效果参考：

核心代码 #

const xScale = d3
  .scaleBand()
  .domain(data.map((d) => d.date.slice(0, 10)))
  .range([0, width])
  .padding(0.25);

svg
  .append('g')
  .attr('transform', `translate(0, ${height})`)
  .call(d3.axisBottom(xScale))
  .style('color', '#ffffff')
  .selectAll('text')
  .attr('transform', 'translate(15,35)rotate(90)');

svg
  .selectAll('.layer')
  .data(layers)
  .join('g')
  .attr('class', 'layer')
  .attr('fill', (layer) => colors[layer.key])
  .selectAll('rect')
  .data((layer) => layer)
  .join('rect')
  .attr('x', (sequence) => {
    xScale(sequence.data.date);
  })
  .attr('width', xScale.bandwidth())
  .attr('y', (sequence) => yScale(sequence[1]))
  .attr('height', (sequence) => yScale(sequence[0]) - yScale(sequence[1]));

问题定位与修复 #

柱子重叠的核心原因有两个：

1. x轴domain与rect的x值不匹配：xScale的domain是截取前10位的日期（d.date.slice(0,10)），但设置rect的x属性时传入的是完整日期（sequence.data.date），scaleBand无法找到对应值，返回undefined，导致所有柱子的x坐标默认设为0，堆叠在一起。
2. x属性回调函数无返回值：设置attr('x')的箭头函数里调用了xScale但没有return结果，同样会导致x值为undefined，最终表现为x=0。

修复方案 #

任选以下一种方式统一日期匹配逻辑：

方案一：统一使用截取后的日期

修改rect的x属性回调，传入和domain一致的截取后日期，并添加return：

.attr('x', (sequence) => {
  return xScale(sequence.data.date.slice(0, 10));
})

方案二：统一使用完整日期

修改xScale的domain为完整日期，确保和rect的x值一致：

const xScale = d3
  .scaleBand()
  .domain(data.map((d) => d.date)) // 使用完整日期
  .range([0, width])
  .padding(0.25);

同时修正rect的x属性回调，添加return：

.attr('x', (sequence) => {
  return xScale(sequence.data.date);
})

修复后，每个柱子会根据对应的日期匹配到正确的x轴位置，堆叠效果正常显示。

内容的提问来源于stack exchange，提问作者Yerlan Yeszhanov