Interpolate Curves
npm install d3-interpolate-curveThis module provides a select of methods for generating number value interpolators from D3 curve functions.
D3 has d3-interpolate functions, for example \d3.interpolateBasis()\, for interpolating a series in numbers into a curve using the Basis interpolation algorithm.
D3 also has d3-curve functions, like \d3.curveCardinal()\ and \d3.curveMonotoneX()\, which can be used to quickly generate SVG curve paths.
However, interpolate functions like \d3.interpolateCardinal()\ and \d3.interpolateMonotoneX()\ do not currently exist in D3, this limits us to to only be able to generate Cardinal and MonotoneX curves for SVG and not for things like X3D.
The d3-interpolate-curve plugin has been written to fill this gap to provide missing interpolation functions like \d3.interpolateCardinal()\ and \d3.interpolateMonotoneX()\ as well as \d3.interpolateFromCurve()\.
If you use NPM, npm install d3-interpolate-curve.
Otherwise, download the latest release.
Alternativly in vanilla JS:
``html
var interpolate = d3.interpolateFromCurve([1,2,7,2], d3.curveMonotoneX, 0.00001, 100);
`
# d3.interpolateFromCurve(values, curve, epsilon, samples) · Source, Examples
Returns interpolator based on D3 curve function; d3.curveCardinal(), d3.curveLinear(), d3.curveMonotoneX() etc.
`js`
var interpolate = d3.interpolateFromCurve([1,2,7,2], d3.curveMonotoneX, 0.00001, 100);
# d3.interpolateCardinal(values) · Source, Examples
Returns interpolator based on cubic Cardinal spline.
`js`
var interpolate = d3.interpolateCardinal([1,2,7,2]);
# d3.interpolateCatmullRom(values) · Source, Examples
Returns interpolator based on a cubic Catmull–Rom spline.
`js`
var interpolate = d3.interpolateCatmullRom([1,2,7,2]);
# d3.interpolateMonotoneX(values) · Source, Examples
Returns interpolator based on MonotoneX spline.
`js``
var interpolate = d3.interpolateMonotoneX([1,2,7,2]);
* Andreas Plesch - hugh credit for goes to Andreas who came up with the original concept for this module.
* Mike Bostock - for advice on converting SVG curves.