如何从点数组中获取贝塞尔折线图的 svg 路径？

Question

我有一个点数组

[[x1,y1],[x2,y2],[x3,y3]...]

，我想用它来渲染曲线图。

我尝试了这个曲线拟合解决方案，它给出了这样的准确曲线-

上面的曲线是平滑且数学上精确的，但我需要一个改变的曲线拟合解决方案，以生成一条穿过所有点而不高于或低于它们的曲线。这意味着曲线的波峰和波谷应该与点重合。像这样的东西-

Answer 1

经过一番研究，我找到了一种使用给定的点数组生成曲线的 svg 路径的方法。该解决方案生成一条平滑曲线，其波峰和波谷与点重合。

const svgQuadraticCurvePath = points => {
  let path = 'M' + points[0][0] + ',' + points[0][1];

  for (let i = 0; i < points.length - 1; i++) {
    const xMid = (points[i][0] + points[i + 1][0]) / 2;
    const yMid = (points[i][1] + points[i + 1][1]) / 2;
    const cpX1 = (xMid + points[i][0]) / 2;
    const cpX2 = (xMid + points[i + 1][0]) / 2;
    path +=
      'Q ' +
      cpX1 +
      ', ' +
      points[i][1] +
      ', ' +
      xMid +
      ', ' +
      yMid +
      (' Q ' +
        cpX2 +
        ', ' +
        points[i + 1][1] +
        ', ' +
        points[i + 1][0] +
        ', ' +
        points[i + 1][1]);
  }

  return path;
};