如何控制d3的scaleTime日期格式并移除多余的时钟时间刻度

架构老林

2026-9-25

问题原因

d3 默认的时间轴会根据传入的时间域跨度自动计算刻度间隔和显示格式，未手动指定配置的情况下，就会出现自动生成12PM这类多余刻度、跨月时自动插入月份标签的非预期表现。

解决方案

你只需要手动指定X轴的刻度值、自定义刻度显示格式即可，修改代码如下：

// 自定义日期显示格式：%d为日，%m为月份，%Y为四位年份，可根据需求调整占位符
const dateFormat = d3.timeFormat("%d/%m/%Y");
// 如果你的日期为UTC标准时间，不想受本地时区影响导致日期偏移，可替换为下面的UTC格式化方法
// const dateFormat = d3.utcFormat("%d/%m/%Y");

let x = d3.scaleTime().range([0, width-margin.right-margin.left])
let y = d3.scaleLinear().range([height-margin.bottom, margin.top])
x.domain([d3.min(area_data, d => d.date), d3.max(area_data, d=>d.date)])
y.domain([0, max_cases])
// 改造X轴配置
let xAxis = d3.axisBottom(x)
  // 强制仅使用你的数据集中的7个日期作为刻度，不会生成多余刻度
  .tickValues(area_data.map(item => item.date))
  // 应用自定义的日期格式
  .tickFormat(dateFormat);
let yAxis = d3.axisLeft(y);