React+D3使用scaleTime时间轴如何将X轴日期格式化为日/月格式

问题根源 #

你混淆了数据解析层和渲染层格式化的逻辑：

• scaleTime时间比例尺的输入必须是Date类型对象，才能完成时间范围到像素位置的映射，你把formatDate返回值改成字符串后，比例尺无法正常计算，自然会报错、数据无法渲染。
• X轴的显示格式属于渲染层的配置，不需要修改原始数据的类型，只需要修改轴刻度的格式化规则即可。

正确配置步骤 #

• 第一步：恢复formatDate方法的原有逻辑，确保返回值为Date对象，用于比例尺计算：

// 保留ISO字符串转Date对象的逻辑，不要在此处做显示格式化
const formatDate = (isoStr) => {
  return utcParse("%Y-%m-%dT%H:%M:%S.%LZ")(isoStr);
};

• 第二步：给X轴配置tickFormat方法，仅控制刻度的显示格式，不影响原始数据：
  如果是用d3-axis生成X轴，直接在轴实例上配置：

  import { utcFormat } from 'd3-time-format';
  import { axisBottom } from 'd3-axis';
  
  const xAxis = axisBottom(xScale)
    // 用utcFormat和utcParse对应，避免时区偏移导致的日期显示错误
    .tickFormat(utcFormat("%d/%m"));
  

  如果是在React中手动遍历刻度渲染：

  {xScale.ticks().map(tickDate => (
    <text 
      key={tickDate.getTime()} 
      x={xScale(tickDate)} 
      y={Y轴偏移量}
      textAnchor="middle"
    >
      {utcFormat("%d/%m")(tickDate)}
    </text>
  ))}
  

补充说明 #

如果你需要使用本地时区而非UTC时区处理日期，把上述代码中的utcParse、utcFormat替换为timeParse、timeFormat即可。

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