如何自定义D3.js时间轴刻度位置：移至周五/周日结束时刻

要实现每周周五和周日的当日结束时刻（23:59:59或次日00:00:00）显示刻度，你需要手动生成符合规则的刻度时间点，再传递给D3的坐标轴组件，替换默认的自动刻度逻辑。

步骤1：生成目标刻度时间数组 #

利用D3的时间范围工具函数，先筛选出时间范围内所有的周五和周日，再将时间调整到当日结束时刻（或次日零点）：

// 获取时间轴的定义域范围
const [startDate, endDate] = this.timeScale.domain();

// 生成所有周五的23:59:59时刻
const fridayEnds = d3.timeFriday.range(startDate, endDate).map(date => {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
});

// 生成所有周日的23:59:59时刻
const sundayEnds = d3.timeSunday.range(startDate, endDate).map(date => {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
});

// 合并数组并按时间排序（去重可选，视时间范围是否有重叠）
const customTickDates = [...fridayEnds, ...sundayEnds].sort((a, b) => a - b);

如果需要用次日零点（比如周日结束对应周一00:00:00），只需要调整日期加1天：

const fridayEnds = d3.timeFriday.range(startDate, endDate).map(date => {
  return new Date(date.setDate(date.getDate() + 1)); // 周六00:00:00
});

const sundayEnds = d3.timeSunday.range(startDate, endDate).map(date => {
  return new Date(date.setDate(date.getDate() + 1)); // 周一00:00:00
});

步骤2：将自定义刻度应用到坐标轴 #

调用axisBottom时，通过tickValues传入生成的时间数组，同时可以用tickFormat自定义刻度的显示文本：

rectContainer
.append("g")
.call(axisBottom(this.timeScale)
  .tickValues(customTickDates)
  .tickFormat(d => {
    // 自定义显示格式，比如"周五 2024-05-17"
    const weekDay = d3.timeFormat("%A")(d);
    const dateStr = d3.timeFormat("%Y-%m-%d")(d);
    return `${weekDay} ${dateStr}`;
  })
);

注意事项 #

• 如果你的时间范围包含起始或结束当天的周五/周日，d3.timeFriday.range和d3.timeSunday.range默认会排除结束边界，若需要包含可以调整范围（比如endDate.setDate(endDate.getDate() + 1)）。
• 若刻度文本重叠，可以通过tickSizeOuter(0)隐藏首尾的额外刻度，或者调整文本旋转角度优化显示。

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