New interpolateFromCurve, interpolateCardinal, interpolateCatmull-Rom & interpolateMonotoneX

.gitignore

@@ -3,3 +3,4 @@
 dist/
 node_modules
 npm-debug.log
+.idea

README.md

@@ -230,6 +230,26 @@ Returns a uniform nonrational B-spline interpolator through the specified array
 
 Returns a uniform nonrational B-spline interpolator through the specified array of *values*, which must be numbers. The control points are implicitly repeated such that the resulting one-dimensional spline has cyclical C² continuity when repeated around *t* in [0,1]. See also [d3.curveBasisClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveBasisClosed).
 
+<a href="#interpolateCardinal" name="interpolateCardinal">#</a> d3.<b>interpolateCardinal</b>(<i>values</i>) · [Source](https://github.com/d3/d3-interpolate/blob/master/src/cardinal.js)
+
+Returns interpolator based on cubic Cardinal spline.
+
+<a href="#interpolateCatmullRom" name="interpolateCatmullRom">#</a> d3.<b>interpolateCatmullRom</b>(<i>values</i>) · [Source](https://github.com/d3/d3-interpolate/blob/master/src/catmullRom.js)
+
+Returns interpolator based on a cubic Catmull–Rom spline.
+
+<a href="#interpolateMonotoneX" name="interpolateMonotoneX">#</a> d3.<b>interpolateMonotoneX</b>(<i>values</i>) · [Source](https://github.com/d3/d3-interpolate/blob/master/src/monotoneX.js)
+
+Returns interpolator based on MonotoneX spline.
+
+<a href="#interpolateFromCurve" name="interpolateFromCurve">#</a> d3.<b>interpolateFromCurve</b>(<i>values, curve, epsilon, samples</i>) · [Source](https://github.com/d3/d3-interpolate/blob/master/src/fromCurve.js)
+
+Returns interpolator based on d3.curve function.
+
+```js
+var interpolator = d3.interpolateFromCurve([1,2,7,2], d3.curveMonotoneX, 0.00001, 100);
+```
+
 ### Piecewise
 
 <a name="piecewise" href="#piecewise">#</a> d3.<b>piecewise</b>(<i>interpolate</i>, <i>values</i>) · [Source](https://github.com/d3/d3-interpolate/blob/master/src/piecewise.js), [Examples](https://observablehq.com/@d3/d3-piecewise)

package.json

@@ -30,7 +30,9 @@
     "postpublish": "git push && git push --tags && cd ../d3.github.com && git pull && cp ../${npm_package_name}/dist/${npm_package_name}.js ${npm_package_name}.v${npm_package_version%%.*}.js && cp ../${npm_package_name}/dist/${npm_package_name}.min.js ${npm_package_name}.v${npm_package_version%%.*}.min.js && git add ${npm_package_name}.v${npm_package_version%%.*}.js ${npm_package_name}.v${npm_package_version%%.*}.min.js && git commit -m \"${npm_package_name} ${npm_package_version}\" && git push && cd - && zip -j dist/${npm_package_name}.zip -- LICENSE README.md dist/${npm_package_name}.js dist/${npm_package_name}.min.js"
   },
   "dependencies": {
-    "d3-color": "1"
+    "d3-color": "1",
+    "d3-shape": "1",
+    "d3-array": "2"
   },
   "devDependencies": {
     "eslint": "5",

src/cardinal.js

@@ -0,0 +1,6 @@
+import {default as fromCurve} from "./fromCurve";
+import {curveCardinal} from "d3-shape";
+
+export default function(values) {
+  return fromCurve(values, curveCardinal)
+}

src/catmullRom.js

@@ -0,0 +1,6 @@
+import {default as fromCurve} from "./fromCurve";
+import {curveCatmullRom} from "d3-shape";
+
+export default function(values) {
+  return fromCurve(values, curveCatmullRom)
+}

src/fromCurve.js

@@ -0,0 +1,69 @@
+import {line as shapeLine} from "d3-shape";
+import {range as arrayRange} from "d3-array";
+
+function curvePolator(points, curve, epsilon, samples) {
+  const path = shapeLine().curve(curve)(points);
+
+  return svgPathInterpolator(path, epsilon, samples);
+}
+
+function svgPathInterpolator(path, epsilon, samples) {
+  // Create detached SVG path
+  path = path || "M0,0L1,1";
+
+  const area = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  area.innerHTML = `<path></path>`;
+  const svgpath = area.querySelector('path');
+  svgpath.setAttribute('d', path);
+
+  // Calculate lengths and max points
+  const totalLength = svgpath.getTotalLength();
+  const minPoint = svgpath.getPointAtLength(0);
+  const maxPoint = svgpath.getPointAtLength(totalLength);
+  let reverse = maxPoint.x < minPoint.x;
+  const range = reverse ? [maxPoint, minPoint] : [minPoint, maxPoint];
+  reverse = reverse ? -1 : 1;
+
+  // Return function
+  return function(x) {
+    const targetX = x === 0 ? 0 : x || minPoint.x; // Check for 0 and null/undefined
+    if (targetX < range[0].x) return range[0];     // Clamp
+    if (targetX > range[1].x) return range[1];
+
+    function estimateLength(l, mn, mx) {
+      let delta = svgpath.getPointAtLength(l).x - targetX;
+      let nextDelta = 0;
+      let iter = 0;
+
+      while (Math.abs(delta) > epsilon && iter < samples) {
+        if (iter > samples) return false;
+        iter++;
+
+        if (reverse * delta < 0) {
+          mn = l;
+          l = (l + mx) / 2;
+        } else {
+          mx = l;
+          l = (mn + l) / 2;
+        }
+        nextDelta = svgpath.getPointAtLength(l).x - targetX;
+
+        delta = nextDelta;
+      }
+
+      return l;
+    }
+
+    const estimatedLength = estimateLength(totalLength / 2, 0, totalLength);
+
+    return svgpath.getPointAtLength(estimatedLength).y;
+  }
+}
+
+export default function(values, curve, epsilon = 0.00001, samples = 100) {
+  const length = values.length;
+  const xrange = arrayRange(length).map(function(d, i) { return i * (1 / (length - 1)); });
+  const points = values.map((v, i) => [xrange[i], v]);
+
+  return curvePolator(points, curve, epsilon, samples);
+}

src/index.js

@@ -8,6 +8,10 @@ export {default as interpolateHue} from "./hue";
 export {default as interpolateNumber} from "./number";
 export {default as interpolateObject} from "./object";
 export {default as interpolateRound} from "./round";
+export {default as interpolateFromCurve} from "./fromCurve";
+export {default as interpolateCardinal} from "./cardinal";
+export {default as interpolateCatmullRom} from "./catmullRom";
+export {default as interpolateMonotoneX} from "./monotoneX";
 export {default as interpolateString} from "./string";
 export {interpolateTransformCss, interpolateTransformSvg} from "./transform/index";
 export {default as interpolateZoom} from "./zoom";

src/monotoneX.js

@@ -0,0 +1,6 @@
+import {default as fromCurve} from "./fromCurve";
+import {curveMonotoneX} from "d3-shape";
+
+export default function(values) {
+  return fromCurve(values, curveMonotoneX)
+}