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

Question

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

例如 - 看这个（"interpolations" 设置为 "monotone"）：

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

我在 JavaScript 中找到了算法的出色实现：

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

我可以使用此功能在曲线上创建任意数量的点，并使用这些点创建一条沿着曲线的多段线。有大量的点，我会有一个相对平滑的曲线。

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

我还发现了这个 Catmull Rom Splines 的 SVG 实现：https://gist.github.com/njvack/6925609

这很好用，但与单调三次插值不同，它倾向于 "overshoot" 给定的点，这对我正在做的事情来说是不可接受的。

显然 - 我可以使用 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;
}

Permanent link to d3_svg_lineMonotoneTangents in d3 v3.5.5.

Answer 2

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

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

SVG implementation of Monotone cubic interpolation without a Library like d3

javascript

svg

d3.js