Question

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

例如 - 看到这个（其中＆＃34;插值＆＃34;设置为＆＃34;单调＆＃34;）：

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

这很有效，但与单调立方插值不同，这往往会超过＆＃34;超过＆＃34;给定的点数，对我所做的事情来说是不可接受的。

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

提前致谢。

Answer 1

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

// 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

SVG实现的单调立方插值没有像d3那样的库

2 个答案: