SVG实现的单调三次插值没有像d3这样的库

Question

我试图在SVG中绘制一条路径，该路径在一系列点之间绘制平滑曲线。

例如，见此（其中"插值"设置为"单调"）：

http://bl.ocks.org/mbostock/4342190

我在JavaScript中发现了一个出色的算法实现：

http://blog.mackerron.com/2011/01/01/javascript-cubic-splines/

我可以使用此函数在曲线上创建任意数量的点，并使用这些点创建将跟随曲线的多段线。如果有大量的点，我会有一个相对平滑的曲线。

但我真的希望能够创建一个使用三次贝塞尔曲线的路径，就像d3一样。

我还发现了Catmull-Rom样条曲线的SVG实现：https://gist.github.com/njvack/6925609

这很好，但与单调三次插值不同，这往往会"超调"给定的点，这对我正在做的事情来说是不可接受的。

显然，我可以使用d3，但如果可能的话，我真的希望能够在没有库的情况下做到这一点。

提前谢谢。

Answer 1

您可以提取d3的实现，它位于src/svg/line.js:中名为d3_svg_lineMonotoneTangents的函数中

// Interpolates the given points using Fritsch-Carlson Monotone cubic Hermite
// interpolation. Returns an array of tangent vectors. For details, see
// http://en.wikipedia.org/wiki/Monotone_cubic_interpolation
function d3_svg_lineMonotoneTangents(points) {
  // ...
  return tangents;
}

d3 v3.5.5中到d3_svg_lineMonotoneTangents的永久链接。

Answer 2

对于D3 v5，您可以在这里找到它的（改进的）实现：https://github.com/d3/d3-shape/blob/master/src/curve/monotone.js