如何在D3.js折线图中将年度X轴标签改为6月30日显示？

没问题，这事儿很好解决！你的代码里当前用d3.timeYear生成的刻度默认是每年的1月1日，要改成6月30日，得同时调整刻度的位置和显示文本，下面是具体的实现方法：

方法一：自定义刻度值（最直接） #

我们手动生成所有对应年份的6月30日日期，传给轴的tickValues方法，这样刻度位置和显示文本都会对应到年中这天：

// 先获取X轴的定义域起止日期
const [startDate, endDate] = x.domain();

// 生成每年6月30日的日期数组（注意月份是0-based，6月对应数字5）
const midYearTicks = d3.timeYear.range(startDate, endDate)
  .map(yearDate => new Date(yearDate.getFullYear(), 5, 30));

// 重新绘制X轴
g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x)
    .tickFormat(d3.timeFormat("%b/%d/%Y"))
    .tickValues(midYearTicks)) // 替换为自定义的刻度值
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dy", ".25em")
  .attr("transform", "rotate(-45)");

为什么这么做？ #

• d3.timeYear.range(startDate, endDate)会生成从起始年到结束年每年1月1日的日期列表，我们通过map把每个日期转换成当年的6月30日。
• 用tickValues替代原来的ticks(d3.timeYear)，强制轴使用我们定义的日期作为刻度位置，这样标签就会精准定位在年中，同时文本显示为Jun/30/YYYY。

方法二：灵活控制刻度间隔（可选） #

如果需要每隔N年显示一次刻度（比如每2年），可以用d3.timeYear.every(n)配合日期调整：

// 生成每2年一次的6月30日刻度
const customTickGenerator = d3.timeYear.every(2)
  .range(startDate, endDate)
  .map(d => new Date(d.getFullYear(), 5, 30));

// 轴的调用和方法一一致，只需把tickValues换成customTickGenerator即可

这样修改后，你的X轴标签就会准确显示在每年的6月30日位置啦！

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