使用 d3 的 SVG 折线图未沿 y 轴渲染到全高度

Question

我正在使用 d3 渲染 svg 折线图。对于 y 轴，图表数据中的最大值为 104，最小值为 0。我已将图表高度设置为 500。但是最大值（即 104）应该在顶部高度渲染，但其渲染高度在 270 附近的高度。 另外，如何从 svg 边界内的 x 位置获取 svg 路径的 y 值？

我在图表数据中使用时间戳作为 x 轴值

我的代码：

import * as shape from "d3-shape";
import { scaleLinear } from "d3-scale";
const SIZE = 500
const data = [
    { "weight": 0, "date": 1723939200000 },
    { "weight": 0, "date": 1724284800000 },
    { "weight": 0, "date": 1724371200000 },
    { "weight": 60, "date": 1724493742250 },
    { "weight": 0, "date": 1724544000000 },
    { "weight": 104, "date": 1724653305251 },
    { "weight": 0, "date": 1724716800000 },
    { "weight": 0, "date": 1724803200000 },
    { "weight": 0, "date": 1725235200000 }]

const formattedValues = data.map((rec) => [rec.weight, rec.date] as [number, number]);
const weights = formattedValues.map((value) => value[0]);
const dates = formattedValues.map((value) => value[1]);
const scaleX = scaleLinear().domain([Math.min(...dates), Math.max(...dates)]).range([0, SIZE]);
const minWeight = Math.min(...weights);
const maxWeight = Math.max(...weights);
const scaleY = scaleLinear().domain([maxWeight, minWeight]).range([0, SIZE])
const path = shape.line().x(([, x]) => scaleX(x) as number).y(([y]) => {
    return scaleY(y) as number
}).curve(shape.curveBasis)(formattedValues) as string

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

        </div>
    )
}

export default Home

蓝色边框是 svg 宽度和高度，这就是图表的渲染方式

Answer 1

我认为这是因为我使用的是 shape.curveBasis ，它可以平滑数据点之间的曲线，从而以某种方式抑制原始值。我尝试使用其他曲线作为前。 shape.curveBumpX 那么最大权重值正确映射到 SVG 的高度。