如何让D3 scaleTime的刻度精准包含起始与结束时间？

你的问题出在两个核心点：

• .nice() 方法会自动把定义域扩展到「更规整」的时间边界，直接覆盖了你设定的起始和结束时间（比如把8点调整到6点）
• .ticks(9) 是让D3生成近似9个刻度，它会自动选择时间间隔，不会保证包含首尾的自定义时间

下面给你两种可行的解决方案：

方案1：手动指定刻度值（精准控制） #

直接生成包含起始、结束时间的刻度数组，用 tickValues() 传入比例尺，完全规避D3自动调整的问题：

import { scaleTime } from "d3-scale";
import { timeHour } from "d3-time";

const now = moment().set({ hour: 8 }).valueOf();
const days = moment().add(2, "days").set({ hour: 8 }).valueOf();

// 生成从起始时间开始，每6小时一个的刻度（左闭右开，所以最后要手动加结束时间）
const tickTimes = timeHour.range(new Date(now), new Date(days), 6);
tickTimes.push(new Date(days));

const _ticks = scaleTime()
  .domain([now, days])
  .tickValues(tickTimes)
  .tickFormat(d => moment(d).format("l hh:mm"))();

这样生成的刻度会严格包含 now（8点）和 days（两天后的8点），中间按6小时间隔分布，刚好9个刻度（匹配你原本ticks(9)的需求）。

方案2：去掉.nice()并补全结束时间 #

如果不想手动生成刻度数组，也可以去掉.nice()，然后用指定时间间隔生成刻度，最后补全可能缺失的结束时间：

import { scaleTime } from "d3-scale";
import { timeHour } from "d3-time";

const now = moment().set({ hour: 8 }).valueOf();
const days = moment().add(2, "days").set({ hour: 8 }).valueOf();

let _ticks = scaleTime()
  .domain([now, days])
  // 去掉.nice()，保留原始定义域
  .ticks(timeHour.every(6))
  .map(d => moment(d).format("l hh:mm"));

// 检查最后一个刻度是否等于结束时间，不等则手动添加
const endTimeStr = moment(days).format("l hh:mm");
if (_ticks[_ticks.length - 1] !== endTimeStr) {
  _ticks.push(endTimeStr);
}

原代码问题根源 #

你使用.nice()后，D3会把[now, days]这个定义域调整到最近的「规整」时间点——比如原本的8点会被调整到6点（因为6小时间隔的话，6点是更规整的起始），所以生成的刻度自然不会包含你设定的8点起始/结束时间。

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