提供svg v1路径参数d时出错

Error when providing svg v1 path parameter d

本文关键字：出错 参数 路径 svg v1 提供      更新时间：2023-09-26

我的d参数:

M1 40.00000000000003 69.28203230275508A80 80 0 0 -80 -9.797174393178826e-15

我收到一个错误:

Error: <path> attribute d: Expected number, "…9.28203230275508A80 80 0 0 -80 -…".

由于某种原因，我只在描述大于180度，179'和更小的弧时得到此错误。

更新:似乎是一个关于如何生成路径参数的正则表达式问题。这是创建它的代码块:

let firstArcSection = /(^.+?)L/;
let newArc = firstArcSection.exec( d3.select(this).select('path').attr('d') )[1];
newArc = newArc.replace(/,/g , " ");
if (d.endAngle > 90 * Math.PI/180) {
    let startLoc    = /M(.*?)A/,
        middleLoc   = /A(.*?) 0 [01] 1/,
        endLoc      = / 0 [01] 1 (.*?)$/;
    let newStart = endLoc.exec( newArc )[1];
    let newEnd = startLoc.exec( newArc )[1];
    let middleSec = middleLoc.exec( newArc )[1];
    newArc = `M${newStart}A${middleSec} 0 0 0 ${newEnd}`;
}

文本仍然显示在圆弧的错误一侧，但至少现在没有错误了

找到了!非常感谢@altocumulus识别出任性的正则表达式。解析原始弧路径的正则表达式在位置以0结尾的情况下匹配太多(80 0 1)，而在设置了大弧标志的情况下匹配不够(0 1 1)。我还发现，在某些情况下，d3创建的圆弧带有舍入误差，导致在同一个饼状图中出现两个180度圆弧。下面是工作代码:

let firstArcSection = /(^.+?)L/;
let newArc = firstArcSection.exec( d3.select(this).select('path').attr('d') )[1];
newArc = newArc.replace(/,/g , " ");
let middleLoc = /A(.*?) 0 ([01]) 1/;
let middleSec = middleLoc.exec( newArc );
if (d.endAngle > 90 * Math.PI/180 && (middleSec[2] == '0' || d.startAngle > Math.PI / 2 )) {
    let startLoc    = /M(.*?)A/,
        endLoc      = / 0 [01] 1 (.*?)$/;
    let newStart = endLoc.exec( newArc );
    let newEnd = startLoc.exec( newArc );
    newArc = `M${newStart[1]}A${middleSec[1]} 0 0 0 ${newEnd[1]}`;
}
相关文章：