D3.js v4 Y轴小时显示异常求助：时间范围偏移问题

嘿，这个问题我之前做类似的24小时时间线图表时也碰到过，大概率是时间解析时的时区偏差或者比例尺定义域设置不严谨导致的，咱们一步步来排查修复：

1. 先确认时间解析是否准确 #

首先要排查的是你解析时间字符串的代码，D3的d3.timeParse默认会使用本地时区解析，如果你的数据是UTC时间但本地时区有偏移，就会出现小时减1的情况。

• 建议改用d3.isoParse来解析ISO格式的时间，它能更精准处理标准时间格式：

const parseTime = d3.isoParse;
// 测试第一个数据点的解析结果
const testStart = parseTime("2016-11-14 20:00");
console.log(testStart.getHours()); // 正常应该输出20，如果是19，那就是时区问题

• 如果数据是UTC时间，一定要用UTC解析器：

const parseUtcTime = d3.timeParse.utc("%Y-%m-%d %H:%M");
const testUtcStart = parseUtcTime("2016-11-14 20:00");
console.log(testUtcStart.getUTCHours()); // 输出20才是正确的

2. 调整Y轴比例尺的定义域 #

因为你的Y轴代表一天24小时，需要明确把比例尺的定义域设置为完整的00:00到次日00:00，这样23:59的时间点才会靠近Y轴的边界，而不是被截断或偏移：

// 定义基准日期，用来构建24小时的时间范围
const baseDay = new Date("2016-11-14T00:00:00");
// 使用时间比例尺，范围覆盖完整24小时
const yScale = d3.scaleTime()
  .domain([
    baseDay, 
    new Date(baseDay.getTime() + 24 * 60 * 60 * 1000) // 当天00:00到次日00:00
  ])
  .range([height, 0]); // 根据你的图表布局调整range，比如向下为Y轴正方向就反转

如果是UTC时间，对应改用d3.scaleUtc：

const yScale = d3.scaleUtc()
  .domain([d3.utcDay(baseDay), d3.utcDay(baseDay).add(1, "day")])
  .range([height, 0]);

3. 修正数据的时间映射逻辑 #

你的数据包含跨日期的时间段（比如第三个数据是11-15的00:00到04:00），所以绘制时需要把每个时间点的小时/分钟部分映射到Y轴的24小时范围里，而不是直接用完整的日期时间：

data.forEach(d => {
  const startDate = parseTime(d.start);
  const endDate = parseTime(d.end);
  
  // 创建仅保留小时分钟的时间对象（基于基准日期）
  d.yStart = new Date(baseDay.getFullYear(), baseDay.getMonth(), baseDay.getDate(), 
                      startDate.getHours(), startDate.getMinutes());
  d.yEnd = new Date(baseDay.getFullYear(), baseDay.getMonth(), baseDay.getDate(), 
                    endDate.getHours(), endDate.getMinutes());
  
  // 处理跨天的情况：比如如果end是次日00:00，就设为基准日的24:00（即次日00:00）
  if (endDate.getDate() !== baseDay.getDate()) {
    d.yEnd = new Date(baseDay.getTime() + 24 * 60 * 60 * 1000);
  }
});

之后绘制矩形时，用yScale(d.yStart)和yScale(d.yEnd)来计算Y轴位置，就能准确对应20:00到23:59的范围了。

4. 验证比例尺映射结果 #

可以手动计算一个点验证：假设Y轴高度是480px（对应24小时，每小时20px），20:00对应的Y位置应该是 480 - 20*20 = 80px，如果实际渲染的位置是480 - 19*20 = 100px，那说明解析后的小时确实是19，回到第一步排查时区问题即可。

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