如何在d3.scaleTime()坐标轴刻度中隐藏年份等大时间单位？

我完全理解你的痛点——用D3绘制秒级时长的时间序列时，默认的时间格式化会跳出1970年的刻度，破坏了图表的可读性，而且你想通过原生API解决，不想用CSS隐藏这种hack方法。

问题根源 #

你当前的xScale.domain([0, startTime - endTime])使用了Unix纪元起始点（0对应1970-01-01）作为轴的起点，D3的默认时间格式化逻辑会根据刻度的时间范围自动选择显示单位，当时间范围包含纪元起始点时，就会触发年份、月份这些大单位的显示。

核心解决方案：复用D3默认格式化逻辑，过滤大时间单位 #

D3的默认时间轴格式化依赖d3.timeFormatMulti（或UTC版本），它内置了一套根据时间间隔自动选择格式的规则。我们可以修改这套规则，去掉包含年、月、日的格式，同时保留秒、毫秒这些你需要的单位。

步骤1：修正时间比例尺的Domain（可选但推荐）

首先确保你的Domain是正确的时长范围，假设duration = endTime - startTime（注意顺序，结束时间减起始时间得到正的时长毫秒数）：

const duration = endTime - startTime;
const xScale = d3.scaleTime()
  .domain([new Date(0), new Date(duration)]) // 用Date对象更清晰，也可以直接用[0, duration]
  .range([0, width]);

步骤2：自定义过滤后的时间格式器

我们先获取D3默认的时间格式规则，过滤掉包含年、月、日的格式，再创建自己的格式器：

// 获取D3默认的时间格式规则数组
const defaultTimeFormats = d3.timeFormatMulti()._formats;

// 过滤掉所有包含年、月、日相关占位符的格式规则
const filteredFormats = defaultTimeFormats.filter(([formatStr]) => {
  return !['%Y', '%B', '%b', '%d', '%x', '%A', '%a'].some(placeholder => formatStr.includes(placeholder));
});

// 创建自定义的时间格式器，只保留时分秒、毫秒的规则
const customTimeFormatter = d3.timeFormatMulti(filteredFormats);

步骤3：将自定义格式器应用到坐标轴

把这个格式器传给axisBottom的tickFormat方法：

const xAxis = d3.axisBottom(xScale)
  .tickFormat(d => customTimeFormatter(d));

// 渲染坐标轴
xAxisGroupSelection
  .attr('transform', `translate(0, ${height})`)
  .call(xAxis);

为什么这能解决问题？ #

• 我们没有替换D3的自动格式化逻辑，只是过滤了不需要的大单位规则，所以D3依然会根据你的图表宽度、时长范围自动选择最合适的格式（比如秒、毫秒）。
• 完全使用D3原生API实现，没有依赖CSS隐藏或手动修改DOM的迂回方法。

额外优化：如果你的数据是纯时长（无具体时间戳） #

如果你的数据只是时长（比如从0开始的秒数/毫秒数），其实可以考虑用d3.scaleLinear配合时长格式化，这样彻底避开1970年的问题：

const xScale = d3.scaleLinear()
  .domain([0, duration])
  .range([0, width]);

// 自定义时长格式化函数，自动适配秒/毫秒
const formatDuration = (ms) => {
  const sec = Math.floor(ms / 1000);
  const msRemain = ms % 1000;
  if (msRemain > 0) return `${sec}.${msRemain.toString().padStart(3, '0')}`;
  return `${sec}`;
};

const xAxis = d3.axisBottom(xScale)
  .tickFormat(formatDuration);

这种方式更适合纯时长的场景，同样保留了D3自动生成刻度间隔的智能。

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