D3.js time.ticks日期刻度异常求助：预期7天却得6天或8天

这其实是D3时间刻度的区间计算逻辑导致的，和你设置的时间域边界（精确到时分秒）以及D3处理时间刻度的规则直接相关，咱们一步步拆解：

为什么原始域只得到6个刻度？ #

你的原始时间域是[2018-02-25, 2018-03-03]，如果这两个日期都默认是00:00:00的话，实际覆盖的时间区间是「25号零点」到「3号零点」，总时长刚好7天整。但D3的d3.timeDay刻度是按**“左闭右开”**的规则生成的：它只会保留满足 起始时间 ≤ 刻度时间 < 结束时间 的刻度点。

也就是说，3号零点刚好等于你的结束域，不会被包含进去，最终生成的刻度就是25、26、27、28、1、2——刚好6个。

为什么加1天后得到8个刻度？ #

当你用Moment把结束域加1天，变成2018-03-04T00:00:00，此时区间变成「25号零点」到「4号零点」，总时长8天。按照左闭右开的规则，D3会生成从25号到4号的所有完整天刻度：25、26、27、28、1、2、3、4——一共8个，自然多出来了你不需要的4号刻度。

解决方法 #

这里给你两个最直接的方案：

方案1：调整结束域到当天最后一刻 #

把结束日期设置为2018-03-03T23:59:59（用Moment的endOf('day')可以快速实现），这样3号零点的刻度就会被包含在起始时间 ≤ 刻度时间 < 结束时间的范围内，D3就能生成你想要的7个刻度：

const start = moment('2018-02-25').startOf('day');
const end = moment('2018-03-03').endOf('day');
const xScale = d3.scaleTime()
  .domain([start.toDate(), end.toDate()])
  .range([0, width]);
const ticks = xScale.ticks(d3.timeDay); // 此时会包含25到3号的7个刻度

方案2：手动生成精确的刻度数组 #

如果不想依赖D3的自动刻度计算，直接用Moment生成你需要的7天数组，然后强制指定给坐标轴：

const start = moment('2018-02-25');
// 生成从25号到3号的7天日期数组
const customTicks = Array.from({length:7}, (_,i) => start.clone().add(i, 'days').toDate());

// 给坐标轴指定刻度值并格式化显示
const xAxis = d3.axisBottom(xScale)
  .tickValues(customTicks)
  .tickFormat(d => moment(d).format('ddd D')); // 输出Sun 25、Mon 26这类格式

补充说明 #

D3的时间刻度设计是为了处理连续时间区间的可视化，自动刻度会优先保证区间的均匀性和完整性，而不是严格按照“起始数N天”来生成。当你需要精确控制刻度的数量和具体值时，手动生成刻度数组是最稳妥的方式。

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