如何用Rechart绘制多组数据折线图并正确对齐X轴

核心问题在于原代码可能将X轴的时间字符串当作分类值处理，导致B组数据被顺序排列在A组之后，而非基于实际时间位置对齐。以下是具体解决步骤：

1. 将时间字符串转换为相对数值X轴坐标 #

把所有时间点转换为相对于起始时间（A组第一个点：17:00）的分钟数，这样每个点的X值是其在时间线上的线性位置：

• A[0]（17:00）→ 0分钟
• B[0]（17:30）→ 30分钟
• A[1]（18:00）→ 60分钟
  以此类推。

2. 处理两组数据集 #

以D3.js为例，代码如下：

// 解析时间字符串为Date对象
const parseTime = d3.timeParse("%a %b %d %Y %H:%M:%S");
const startTime = parseTime(A[0].name);

// 处理A组数据，添加相对X值（分钟数）
const processedA = A.map(d => {
  const date = parseTime(d.name);
  return {
    ...d,
    x: (date - startTime) / (1000 * 60) // 毫秒转分钟
  };
});

// 处理B组数据，逻辑同上
const processedB = B.map(d => {
  const date = parseTime(d.name);
  return {
    ...d,
    x: (date - startTime) / (1000 * 60)
  };
});

3. 创建符合[0, 'auto']要求的X轴比例尺 #

计算两组数据中的最大X值，将比例尺domain设为[0, maxX]，即从0开始自动适配到最远时间点：

// 合并所有X值，找到最大值
const allX = [...processedA.map(d => d.x), ...processedB.map(d => d.x)];
const maxX = d3.max(allX);

// 线性X比例尺，满足[0, 'auto']的需求
const xScale = d3.scaleLinear()
  .domain([0, maxX])
  .range([margin.left, width - margin.right]);

4. 绘制两条折线 #

使用同一个X比例尺渲染两组折线，确保时间位置对齐：

// 创建折线生成器
const lineGenerator = d3.line()
  .x(d => xScale(d.x))
  .y(d => yScale(d.value));

// 绘制A组折线（蓝色）
svg.append("path")
  .datum(processedA)
  .attr("fill", "none")
  .attr("stroke", "#2196F3")
  .attr("stroke-width", 2)
  .attr("d", lineGenerator);

// 绘制B组折线（红色）
svg.append("path")
  .datum(processedB)
  .attr("fill", "none")
  .attr("stroke", "#F44336")
  .attr("d", lineGenerator);

5. 优化X轴显示（可选） #

如果希望X轴显示时间而非分钟数，可自定义tick格式化：

const xAxis = d3.axisBottom(xScale)
  .tickFormat(d => {
    const tickDate = new Date(startTime.getTime() + d * 1000 * 60);
    return d3.timeFormat("%H:%M")(tickDate);
  });

svg.append("g")
  .attr("transform", `translate(0, ${height - margin.bottom})`)
  .call(xAxis);

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