D3折线图Y值变化早于对应X轴日期问题求助

你的问题出在D3阶梯线的插值模式上：

• D3默认的d3.step()使用'before'模式，这种模式下新数值会在对应日期的当天就开始绘制，导致70出现在4月20日的位置。
• 要让数值在对应日期之后显示，需要将阶梯线的插值模式改为'after'。

修改step-chart.ts中的线生成器代码：

// 替换原来的curve(d3.step())
const line = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.value))
  .curve(d3.stepAfter()); // 使用stepAfter模式

或者也可以用d3.step().type('after')，效果一致：

const line = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.value))
  .curve(d3.step().type('after'));

这样修改后，数值70就会从4月21日对应的x轴位置开始向右绘制，符合你预期的显示效果。

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