CODEWITHSUNDEEP
javascriptsvgd3.js
mattstuehler
mattstuehler

Reputation: 9302

SVG implementation of Monotone cubic interpolation without a Library like d3

I'm trying to draw a path in SVG that draws a smoothed curve between a series of points.

For example - see this (where "interpolations" is set to "monotone"):

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

I've found an excellent implementation of an algorithm in JavaScript here:

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

I can use this function to create as many points on a the curve as a want, and use those points to create a polyline that will follow the curve. With a huge number of points, I'd have a relatively smooth curve.

But I'd really like to be able to create a path that uses cubic bezier curves, like d3 does.

I also found this SVG implementation of Catmull Rom Splines: https://gist.github.com/njvack/6925609

This works great, but unlike Monotone cubic interpolation, this tends to "overshoot" the given points, which isn't acceptable for what I'm doing.

Obviously - I could use d3, but I'd really like to be able to do this without a library, if at all possible.

Thanks in advance.

Upvotes: 3

Views: 1680

Answers (2)

Gregor Weber
Gregor Weber

Reputation: 688

For D3 v5, you can find its (improved) implementation here: https://github.com/d3/d3-shape/blob/master/src/curve/monotone.js

Upvotes: 0

joews
joews

Reputation: 30330

You could extract d3's implementation, which is in a function called d3_svg_lineMonotoneTangents in 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.

Upvotes: 2

Related Questions