如何用pathfit实现与D3一致的SVG路径100x100缩放效果？

要让pathfit生成的路径和D3的pathStr完全匹配，核心是对齐两者的坐标空间定义和缩放逻辑，以下是具体调整方案：

问题根源 #

你当前的代码里，pathfit的viewbox设置成了0 0 1280 720，这和原始数据的实际坐标范围（x≈0.9848_1，y≈00.1736）完全不匹配；另外D3反转了Y轴方向（range([100,0])），而pathfit默认沿用SVG的Y轴向下为正的规则，这两个差异导致输出不一致。

修正步骤与代码 #

修改后的完整代码 #

function degreeToRadian(d) {
    return (d * Math.PI) / 180;
};

function fnData() {
    const data = d3.range(0, 11, 1).map((d) => {
        const angleRadian = degreeToRadian(d);
        return {
            index: d,
            angleDeg: d,
            angleRadian: angleRadian,
            x: Math.cos(angleRadian),
            y: Math.sin(angleRadian)
        }
    });

    return data;
};

const data = fnData();

// ------------------------ D3 生成路径 ------------------------ //
const scaleX = d3
    .scaleLinear()
    .range([0, 100])
    .domain(d3.extent(data, (d) => d.x));

const scaleY = d3
    .scaleLinear()
    .range([100, 0])
    .domain(d3.extent(data, (d) => d.y));

const pathStr = d3
    .line()
    .x((d) => scaleX(d.x))
    .y((d) => scaleY(d.y))(data);
  
const pathStr2 = d3.line().x(d=>d.x).y(d=>d.y)(data);  

// ------------------------ pathfit 生成一致路径 ------------------------ //
// 先计算原始数据的坐标边界，用于定义pathfit的viewbox
const xMinMax = d3.extent(data, d => d.x);
const yMinMax = d3.extent(data, d => d.y);
const viewBox = `${xMinMax[0]} ${yMinMax[0]} ${xMinMax[1]-xMinMax[0]} ${yMinMax[1]-yMinMax[0]}`;

const base = {
    viewBox,
    preserveAspectRatio: "none" // 关闭宽高比保持，匹配D3独立缩放X/Y的逻辑
};

// 先反转Y轴（对应D3的Y轴向上为正），再缩放到100x100
const pathFitter = new Pathfit(base, undefined, pathStr2)
    .transform([1, 0, 0, -1, 0, yMinMax[1]-yMinMax[0]]) // Y轴反转+偏移，抵消SVG默认方向
    .scale_to_fit(100, 100);

console.log({d3:pathStr, pathfit:pathFitter});

<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pathfit@1.0.4/pathfit.js"></script>

关键调整说明 #

1. 对齐原始坐标空间：把pathfit的viewbox设置为原始数据的实际x/y范围，确保pathfit的初始坐标系统和D3的domain完全一致。
2. 关闭宽高比保持：D3的X/Y是独立线性缩放，不是按比例缩放，所以设置preserveAspectRatio: "none"。
3. 反转Y轴：通过transform方法应用Y轴反转变换（缩放因子-1），再加上偏移量抵消SVG默认的Y轴向下方向，和D3的range([100,0])效果对齐。
4. 直接缩放到目标尺寸：用scale_to_fit方法直接缩放到100x100，匹配D3的range范围。

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