如何用D3.js/Plotly.js平滑由少量点构成的闭合曲线？

方法1：调整Catmull-Rom曲线的张力参数 #

d3.curveCatmullRomClosed支持通过tension()参数调整平滑度，默认张力为0.5。增大张力值能提升平滑效果，同时保持曲线经过所有输入点：

const fitCurve = d3.line()
  .x((p) => p[0])
  .y((p) => p[1])
  .curve(d3.curveCatmullRomClosed.tension(0.8));

张力值范围在0到1之间，越接近1曲线越平滑（过度增大可能出现不自然凸起），可根据实际效果微调参数，找到平滑度与点贴合度的平衡点。

方法2：加密点集后使用B样条曲线 #

若想要B样条的高平滑度，同时让曲线贴近原始点路径，可先加密原始点集，再用d3.curveBasisClosed处理：

// 加密原始点，生成密集插值点
const interpolatePoints = d3.range(0, points.length, 0.1).map(t => {
  const i = Math.floor(t);
  const p0 = points[i];
  const p1 = points[(i + 1) % points.length];
  return [
    d3.interpolateNumber(p0[0], p1[0])(t - i),
    d3.interpolateNumber(p0[1], p1[1])(t - i)
  ];
});

// 用加密点生成平滑闭合曲线
const fitCurve = d3.line()
  .x((p) => p[0])
  .y((p) => p[1])
  .curve(d3.curveBasisClosed);

通过增加点的密度，让B样条曲线更贴合原始点的路径，同时保留B样条的平滑特性。

方法3：使用自然样条插值 #

d3.curveNaturalClosed是自然样条曲线，会经过所有输入点，且平滑度介于Catmull-Rom和B样条之间，可直接尝试：

const fitCurve = d3.line()
  .x((p) => p[0])
  .y((p) => p[1])
  .curve(d3.curveNaturalClosed);

自然样条保证曲线在每个点处曲率连续，平滑效果优于默认参数的Catmull-Rom，同时严格经过所有输入点。

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