D3图表Zooming与Brushing问题：使用d3.area()绘制的区域消失

看起来你遇到的问题很典型——用d3.area()替代d3.line()后，主图表（focus）的填充区域在context刷选时消失，但数据点（圆形）正常更新。核心原因通常是area生成器的路径没有随缩放后的比例尺重新计算，或者初始化时area的配置/数据绑定有误。下面一步步帮你排查和修复：

1. 先确认d3.area()的正确配置 #

和d3.line()只需要x/y访问器不同，d3.area()需要定义上边界（y1）和下边界（y0）（基线），同时要确保x轴的时间数据被正确解析。

第一步：预处理时间数据 #

你的xLabel是字符串格式，必须先转为Date对象才能让时间比例尺正常工作：

// 解析HH:mm:SS格式的时间字符串
const parseTime = d3.timeParse("%H:%M:%S");
// 转换数据，新增x字段存储Date对象
const processedData = data.map(d => ({
  x: parseTime(d.xLabel),
  LastMonday: d.LastMonday,
  Today: d.Today
}));

第二步：正确定义area生成器 #

为每个系列（LastMonday/Today）创建独立的area生成器，指定x、y1（数据值）和y0（基线，比如y轴最小值0）：

// 假设xScale是全局的时间比例尺，yScale是线性比例尺
const areaLastMonday = d3.area()
  .x(d => xScale(d.x))       // x轴映射
  .y1(d => yScale(d.LastMonday)) // 上边界：数据值
  .y0(yScale(0))             // 下边界：基线（这里设为0）
  .curve(d3.curveMonotoneX); // 可选：平滑曲线，提升视觉效果

const areaToday = d3.area()
  .x(d => xScale(d.x))
  .y1(d => yScale(d.Today))
  .y0(yScale(0))
  .curve(d3.curveMonotoneX);

2. 初始化时正确绑定area的数据 #

d3.area()需要接收整个数据数组来生成完整的填充路径，所以要用datum()而不是data()（后者会为每个数据点创建单独的DOM元素）：

// 向focus组添加LastMonday的填充区域
focus.append("path")
  .attr("class", "area-lastMonday")
  .datum(processedData) // 绑定整个数组
  .attr("d", areaLastMonday)
  .style("fill", "#69b3a2")
  .style("opacity", 0.6);

// 添加Today的填充区域
focus.append("path")
  .attr("class", "area-today")
  .datum(processedData)
  .attr("d", areaToday)
  .style("fill", "#ff6b6b")
  .style("opacity", 0.6);

3. 在zoomed()函数中更新area路径 #

这是最容易漏掉的关键步骤！你的圆形能正常更新是因为直接用新比例尺重新计算了cx属性，但area的路径需要重新调用生成器生成。

修正后的zoomed函数： #

function zoomed(event) {
  // 获取缩放后的新x比例尺
  const newXScale = event.transform.rescaleX(xScale);
  
  // 更新focus的x轴
  focus.select(".x-axis").call(d3.axisBottom(newXScale));
  
  // 更新圆形的x位置（这部分你已经做对了）
  focus.selectAll(".circle-lastMonday")
    .attr("cx", d => newXScale(d.x));
  focus.selectAll(".circle-today")
    .attr("cx", d => newXScale(d.x));
  
  // 关键：重新计算area的路径！
  focus.select(".area-lastMonday")
    .attr("d", areaLastMonday.x(d => newXScale(d.x))); // 替换x访问器为新比例尺
  focus.select(".area-today")
    .attr("d", areaToday.x(d => newXScale(d.x)));
}

如果你的xScale是全局变量，也可以直接替换后复用生成器：

function zoomed(event) {
  xScale = event.transform.rescaleX(xScale);
  
  focus.select(".x-axis").call(d3.axisBottom(xScale));
  
  // 更新圆形...
  
  // 直接调用生成器，因为生成器的x依赖已经更新
  focus.select(".area-lastMonday").attr("d", areaLastMonday);
  focus.select(".area-today").attr("d", areaToday);
}

4. 额外检查点 #

• 确保context的brush是d3.brushX()（只处理x轴范围），避免误操作y轴。
• 检查yScale的定义域是否包含所有数据值，避免area被裁剪到视图外。

按照这些步骤调整后，你的填充区域应该会和圆形一起正常响应brush操作了。

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