D3.js中如何计算两个日期间的中间日期并应用于散点图

云原生阿岚

2026-10-6

D3.js散点图时间段中点坐标计算问题解答

核心错误点

运算逻辑错误：当前代码的计算规则不符合中点坐标的计算逻辑
你编写的代码xScale(new Date(d.endDate)) - xScale(new Date(d.startDate)) * 0.5等价于「结束日期映射x值减去起始日期映射x值的一半」，和正确的中点计算逻辑完全不符。时间段中点x坐标的正确计算逻辑是「起始日期映射x值 + 时间段对应x轴长度的一半」，等价于(起始x值 + 结束x值) / 2。
日期解析错误：你使用的日期格式为DD/MM/YYYY，JS原生Date构造函数默认会将首位数字识别为月份，遇到大于12的日期会直接生成无效日期，导致x轴映射结果异常。

修复方案

步骤1：编写兼容`DD/MM/YYYY`格式的日期解析函数

function parseDate(dateStr) {
  // 拆分日、月、年，注意JS中月份从0开始计数，需要减1
  const [day, month, year] = dateStr.split('/').map(Number);
  return new Date(year, month - 1, day);
}

步骤2：修正cx属性的计算逻辑

.attr("cx", function(d) {
  const startX = xScale(parseDate(d.startDate));
  const endX = xScale(parseDate(d.endDate));
  // 两种计算方式等价，选一种即可
  return startX + (endX - startX) * 0.5;
  // return (startX + endX) / 2;
})