D3.js scaleTime轴刻度异常：指定刻度数未生效问题

核心问题：D3时间轴的ticks()是建议值，而非强制规则 #

D3的时间比例尺轴（axisBottom）处理时间数据时，会优先遵循人类易读的时间间隔逻辑（比如天、周、月等固定时间单位），不会严格执行你通过ticks()设置的刻度数量。哪怕你指定ticks(2)，如果D3认为添加中间刻度更符合时间展示习惯（比如两个连续日期的定义域，它会默认以“天”为间隔，进而生成包含起始、次日、结束的刻度），就会自动调整刻度数量。

另外你代码里的.nice()方法也可能暗中影响：它会自动把定义域扩展到最近的“规整”时间边界，比如原始定义域是[10-01, 10-02]，.nice()可能会调整为[09-30, 10-02]，这也会导致额外刻度出现（虽然你控制台显示定义域只有两个日期，可能你的数据日期刚好是规整边界，但这个点需要留意）。

解决方案：强制指定刻度值 #

要严格只显示数据中的日期刻度，放弃使用ticks()，改用tickValues()直接传入数据里的日期数组：

const xFn = d3.scaleTime()
  .domain(d3.extent(parsedData, d => d.date))
  .range([0, width])
  // 如果不需要自动扩展定义域，可以去掉.nice()
  // .nice()

let xAxis = d3.axisBottom(xFn);
xAxis.tickFormat(d3.timeFormat("%b %d, %Y"));
xAxis.tickSize(8);

// 直接指定刻度为数据中的日期
if(parsedData.length < 4) {
  xAxis.tickValues(parsedData.map(d => d.date));
}

这样就能确保X轴只展示你数据中存在的日期，不会自动生成额外刻度。

补充说明 #

如果需要保留.nice()的规整效果，同时控制刻度数量，可以先获取规整后的定义域，再手动生成符合需求的刻度值，比如：

const domain = d3.extent(parsedData, d => d.date);
const niceDomain = d3.scaleTime().domain(domain).nice().domain();
// 仅取规整后的首尾日期作为刻度
xAxis.tickValues([niceDomain[0], niceDomain[1]]);

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