D3.js SVG折线图Y轴未占满高度及路径Y值获取问题

一、Y轴最大值未渲染在SVG顶部的修复 #

原因分析 #

你设置的scaleY映射逻辑是正确的（最大权重104对应Y=0即SVG顶部，最小权重0对应Y=500即SVG底部），但使用curveBasis基数样条插值时，会根据相邻的0值点平滑曲线，导致104的峰值被视觉上拉低，看起来不在顶部。

修复方案 #

1. 保留原始数据点位置：改用线性插值curveLinear，让曲线严格穿过每个数据点：

   const path = shape.line()
     .x(([, x]) => scaleX(x) as number)
     .y(([y]) => scaleY(y) as number)
     .curve(shape.curveLinear) // 替换为线性插值
     (formattedValues) as string
   

2. 保留平滑效果且峰值准确：在104数据点的前后添加相同值的辅助点，避免插值拉低峰值：

   const data = [
       // ... 原有数据
       { "weight": 104, "date": 1724649600000 }, // 104点前1小时
       { "weight": 104, "date": 1724653305251 },
       { "weight": 104, "date": 1724656800000 }, // 104点后1小时
       // ... 原有数据
   ]
   

二、根据SVG范围内的X坐标获取对应Y值 #

方法1：基于已渲染路径的getPointAtLength方法 #

通过SVG路径的原生API遍历路径长度，找到目标X对应的Y值：

import { useRef, useEffect } from 'react';

export function Home() {
  const pathRef = useRef<SVGPathElement>(null);

  useEffect(() => {
    if (!pathRef.current) return;
    const path = pathRef.current;
    const totalLength = path.getTotalLength();
    const targetX = 275; // 目标X坐标
    let currentLength = 0;
    const step = 1; // 步长越小精度越高
    let closestPoint = null;

    while (currentLength <= totalLength) {
      const point = path.getPointAtLength(currentLength);
      // 找到匹配的X坐标区间
      if (Math.abs(point.x - targetX) < 0.5) {
        closestPoint = point;
        break;
      }
      if (point.x > targetX) {
        // 区间内插值计算精确Y值
        const prevPoint = path.getPointAtLength(currentLength - step);
        const ratio = (targetX - prevPoint.x) / (point.x - prevPoint.x);
        closestPoint = {
          x: targetX,
          y: prevPoint.y + ratio * (point.y - prevPoint.y)
        };
        break;
      }
      currentLength += step;
    }
    closestPoint && console.log(`X=${targetX}对应的Y值：${closestPoint.y}`);
  }, []);

  return (
    <div className="homeContainer">
      <svg height={SIZE} width={SIZE} fill="yellow" style={{ border: '2px solid blue' }}>
        <path
          ref={pathRef}
          d={path}
          stroke="black"
          strokeWidth={2}
        />
      </svg>
    </div>
  )
}

方法2：基于D3插值函数的预计算 #

提前创建和路径一致的插值函数，直接计算目标X对应的Y值：

// 创建屏幕坐标点数组
const screenPoints = formattedValues.map(d => [scaleX(d[1]), scaleY(d[0])]);
// 生成和路径相同的插值函数
const interpolateY = shape.line()
  .x(d => d[0])
  .y(d => d[1])
  .curve(shape.curveBasis)
  .interpolate()(screenPoints);

// 根据屏幕X坐标获取Y值的函数
function getYFromScreenX(screenX: number): number | null {
  const segmentIndex = screenPoints.findIndex((p, i) => 
    i < screenPoints.length - 1 && screenX >= p[0] && screenX <= screenPoints[i+1][0]
  );
  if (segmentIndex === -1) return null;
  
  const [p1, p2] = [screenPoints[segmentIndex], screenPoints[segmentIndex+1]];
  const t = (screenX - p1[0]) / (p2[0] - p1[0]);
  return interpolateY(t);
}

// 使用示例
console.log(getYFromScreenX(275));

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