如何为D3折线图与阈值水平线相交形成的区域填充颜色

基于D3 v7版本实现，核心逻辑是先计算折线与阈值线的所有交点，再构造闭合路径实现区域填充，具体实现步骤如下：

1. 前置变量准备 #

提前定义好图表基础参数：

• 阈值数值 const threshold = 50 （替换为你的实际阈值）
• 已配置完成的x轴比例尺xScale、y轴比例尺yScale
• 折线原始数据集dataset，结构示例：[{date: '2024-01-01', value: 30}, ...]

2. 计算交点并构造填充点集 #

遍历所有相邻数据点，判断线段与阈值线的相交关系，收集所有需要用于构造填充区域的坐标点：

const areaPoints = [];
// 计算阈值对应的画布y轴像素坐标
const thresholdY = yScale(threshold);

for (let i = 0; i < dataset.length - 1; i++) {
  const currPoint = dataset[i];
  const nextPoint = dataset[i + 1];
  const currY = yScale(currPoint.value);
  const nextY = yScale(nextPoint.value);

  // 首个点直接加入点集
  if (i === 0) {
    areaPoints.push({
      x: xScale(currPoint.date),
      y: currY
    });
  }

  // 判断当前线段是否与阈值线相交
  const isCross = (currY > thresholdY && nextY < thresholdY) || (currY < thresholdY && nextY > thresholdY);
  if (isCross) {
    // 线性插值计算交点坐标
    const ratio = (thresholdY - currY) / (nextY - currY);
    const intersectX = xScale(currPoint.date) + ratio * (xScale(nextPoint.date) - xScale(currPoint.date));
    areaPoints.push({
      x: intersectX,
      y: thresholdY
    });
  }

  // 加入下一个数据点
  areaPoints.push({
    x: xScale(nextPoint.date),
    y: nextY
  });
}

3. 生成填充区域 #

使用D3内置的area生成器构造闭合路径，支持两种填充场景按需调整：

// 示例：填充折线高于阈值的区域，填充色橙色透明度30%
const upperArea = d3.area()
  .x(d => d.x)
  .y0(thresholdY) // 区域下边界固定为阈值线
  .y1(d => d.y) // 区域上边界为折线本身
  .curve(d3.curveLinear); // 与折线的曲线规则保持一致，折线场景用curveLinear即可

svg.append("path")
  .attr("d", upperArea(areaPoints))
  .attr("fill", "#ff7f0e")
  .attr("opacity", 0.3)
  .attr("stroke", "none");

// 如果需要同时填充低于阈值的区域，新增如下代码即可
const lowerArea = d3.area()
  .x(d => d.x)
  .y0(d => d.y)
  .y1(thresholdY)
  .curve(d3.curveLinear);

svg.append("path")
  .attr("d", lowerArea(areaPoints))
  .attr("fill", "#1f77b4")
  .attr("opacity", 0.3)
  .attr("stroke", "none");

4. 适配特殊场景的注意事项 #

• 若折线使用非线性曲线（比如curveMonotoneX），需要将交点计算逻辑替换为对已生成的折线路径的逐段采样判断，避免线性插值带来的误差
• 折线与阈值线存在多次相交的场景无需额外修改代码，逻辑会自动识别所有交点生成连续的填充块
• 若需要给相交点添加标记，直接遍历areaPoints中y值等于thresholdY的点绘制圆形即可

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