Angular中D3堆叠面积图切换日期X轴后无法渲染的问题

问题背景 #

在Angular项目中使用D3.js绘制堆叠面积图时，将X轴映射值从0、1、2这类连续小数字改为20190101、20200101这类日期格式数值后，图表完全无法渲染。经排查确认：当date字段为小数值时图表正常，改为日期格式数值（如20180101）则失效。

问题根源 #

1. 比例尺不统一：绘制面积图时使用的xScale是固定domain为[0,14]的线性比例尺，当date变为20180101这类大数值时，计算出的x坐标会远远超出图表宽度，导致图形被挤出可视区域。
2. 日期处理不一致：当timeline为true时，X轴使用scaleTime比例尺并解析日期，但绘制面积图时仍然直接使用原始日期数值，而非解析后的日期对象，导致坐标映射错误。
3. SVG容器配置冲突：重复设置svg元素的viewBox和尺寸属性，导致坐标系统混乱。

解决方案 #

• 统一X/Y比例尺：根据timeline参数动态生成对应的X比例尺，绘制面积图时直接使用该比例尺，而非单独定义的xScale/yScale。
• 同步日期解析：当使用时间比例尺时，确保面积图的X坐标访问器使用解析后的日期对象。
• 清理重复的SVG容器配置，避免坐标冲突。

修改后的完整代码 #

draw(graphAnchorId, data, timeline) {
  const chartHeight = 100;
  const chartWidth = 200;
  const tParser = d3.timeParse("%Y%m%d");
  const colors = ["#ffa600BB", "#ff6e54BB", "#dd5182BB", "#955196BB", "#444e86BB", "#003f5cBB"];

  // 预处理数据：如果是时间轴，将date字段转换为日期对象
  const processedData = timeline 
    ? data.map(item => ({...item, date: tParser(item.date.toString())}))
    : data;

  // 生成堆叠数据
  const stackGen = d3.stack().keys(["age1", "age2", "age3", "age4"]);
  const stackedData = stackGen(processedData);

  // 初始化SVG容器，避免重复设置viewBox和尺寸
  const svgContainer = d3.select(`#${graphAnchorId}`)
    .append("div")
    .classed("svg-container", true)
    .append("svg")
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", `0 0 ${chartWidth + 40} ${chartHeight + 20}`) // 预留轴的显示空间
    .classed("svg-content-responsive", true);

  // 定义比例尺
  const yScale = d3.scaleLinear()
    .domain([0, d3.max(processedData, d => d.age1 + d.age2 + d.age3 + d.age4)])
    .range([chartHeight, 0]);

  const xScale = timeline 
    ? d3.scaleTime()
        .domain(d3.extent(processedData, d => d.date))
        .range([20, chartWidth]) // 左侧预留空间给Y轴
    : d3.scaleLinear()
        .domain(d3.extent(processedData, d => d.date))
        .range([20, chartWidth]);

  // 定义面积生成器
  const area = d3.area()
    .x(d => xScale(d.data.date))
    .y0(d => yScale(d[0]))
    .y1(d => yScale(d[1]));

  // 绘制堆叠面积
  const ageGroup = svgContainer.selectAll('.valgroup')
    .data(stackedData)
    .enter()
    .append('g')
    .attr('class', 'valgroup')
    .attr("stroke", "#222222CC")
    .attr("stroke-width", 0.25)
    .style('fill', (d, i) => colors[i]);

  ageGroup.append('path').attr('d', d => area(d));

  // 添加Y轴
  svgContainer.append("g")
    .attr("transform", "translate(20,0)") // 偏移到预留空间
    .call(d3.axisLeft(yScale));

  // 添加X轴
  svgContainer.append("g")
    .attr("transform", `translate(0,${chartHeight})`)
    .call(d3.axisBottom(xScale));
}

核心修改点说明 #

• 新增数据预处理步骤，当timeline为true时，将date数值转为日期对象，确保后续比例尺和面积生成器使用统一的日期格式。
• 移除了独立的xScale/yScale定义，统一使用根据参数生成的比例尺，避免映射不一致。
• 调整了SVG的viewBox和比例尺的range，预留了轴的显示空间，避免图形和轴重叠。
• 清理了重复的SVG尺寸和viewBox设置，简化容器初始化逻辑。

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