Comments (8)
Well sure, it depends on what you’re asking for.
If you want to draw the spline, then I’d suggest a new curve implementation in d3-shape (which can be used to render to SVG or Canvas or anything else that understands piecewise cubic Béziers).
If you want to evaluate points along the spline for a given t in [0, 1], then you probably want an interpolator here in d3-interpolate, along the lines of d3.interpolateBasis. See an example usage here:
https://bl.ocks.org/mbostock/048d21cf747371b11884f75ad896e5a5
An interpolator can be used to draw the spline, but it’s pretty inefficient; the example above generators 1,000 samples along each spline and then draws a simple piecewise linear curve. Likewise a curve can be used to sample points along the spline, but that’s also inefficient since you need to go through an SVG API such as getPointAtLength.
from d3-interpolate.
Smooth interpolation is useful outside of drawing curves. What would it take to translate the curve styles to interpolators ? I think the curves are mostly based on the svg native bezier curves. However, I think beziers can be represented as cubic splines: http://www.joshbarczak.com/blog/?p=730, others. So there may be a generic way to link spline interpolators to the curves. Let's first assume there is bezierPoints2splineControlpoints () function. Then see how it would be plugged into the curve factories.
from d3-interpolate.
This should be a d3-shape issue rather than a d3-interpolate issue.
I believe the difference is that the other interpolation method you mention assumes that y is a function of x, whereas in the D3 implementation, a 2D parameterized spline is used (x and y are both functions of t). So with the D3 interpolation it is valid to have multiple values of y for the same x, as you see in your example image where the blue line curves left from (0,0) before curving right again.
Seems reasonable to consider a new curveCubicX implementation for this case.
from d3-interpolate.
Thank you for the clarifications. I will move the issue over to d3-shape, and read more about how it might be implemented.
(Initially I wanted to log the issue there, but to my mind the curves from d3-shape were not readily available to use as interpolators, since their purpose is to generate Bézier curves for SVG rather than be used as t ↦ xt, t ↦ yt functions?)
from d3-interpolate.
(Moved the issue here: d3/d3-shape#118)
from d3-interpolate.
Perhaps this is already done somewhere outside of d3 ?
from d3-interpolate.
https://github.com/d3/d3-shape/blob/acb6053eae36fe6dcdb0b62fe2691bee2acc511b/src/curve/basis.js does the inverse, eg. converts basis splines to Bezier.
from d3-interpolate.
interpolateBasis() is uniform B-Spline. It looks like it would be easiest to just add interpolateBezier() with the Bezier basis functions,
from d3-interpolate.
Related Issues (20)
- Images in readme not loading due to Content Security Policy
- Simple zoom-in with interpolateZoom gives negative duration
- Interpolated data spike value problem HOT 1
- d3-color vulnerable to ReDoS HOT 1
- d3-color dependency update due to ReDoS HOT 1
- d3-color version issue HOT 2
- [bug] require() of ES modules is not supported HOT 1
- NaN RGB values if passing zero to interpolateRgb
- Meteor app crashes HOT 1
- d3-color version issue
- interpolateBalanced? HOT 3
- d3.piecewise(values)?
- Non-uniform d3.interpolateRgbBasis HOT 2
- array.js sometimes reports errors HOT 1
- Catmull-Rom interpolator? HOT 1
- Interpolate with t=Infinity returns NaN instead of Infinity HOT 6
- d3.interpolateHcl(a,b)(1) doesn't return 'b' HOT 3
- 3.0.1 doesn't work with Jest HOT 10
- Require Cycle with object.js and value.js HOT 1
- Require cycle: `value.js` -> `object.js` -> `value.js` HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-interpolate.