npm install --save @vx/curve
A curve is a function that can be passed into other vx objects, mainly a LinePath to change the way the line is structured.
For example, checkout the difference between a Curve.natural:
and a Curve.step:
The @vx/curve package is a wrapper over d3-shape curve functions.
Any function with the prefix curve in d3 can be used through vx like so:
import { curveCatmullRomOpen } from '@vx/curve';
let line = (<Shape.LinePath curve={curveCatmullRomOpen} />)
// or if you want namespace all Curves under the `Curve`
import * as Curve from `@vx/curve`;
let line = (<Shape.LinePath curve={Curve.curveCatmullRomOpen} />)| vx | d3 |
|---|---|
| curveBasis | curveBasis |
| curveBasisClose | curveBasisClosed |
| curveBasisOpen | curveBasisOpen |
| curveStep | curveStep |
| curveStepAfter | curveStepAfter |
| curveStepBefore | curveStepbefore |
| curveBundle | curveBundle |
| curveLinear | curveLinear |
| curveLinearClosed | curveLinearClosed |
| curveMonotoneX | curveMonotoneX |
| curveMonotoneY | curveMonotoneY |
| curveCardinal | curveCardinal |
| curveCardinalClosed | curveCardinalClosed |
| curveCardinalOpen | curveCardinalOpen |
| curveCatmullRom | curveCatmullRom |
| curveCatmullRomClosed | curveCatmullRomClosed |
| curveCatmullRomOpen | curveCatmullRomOpen |
| curveNatural | curveNatural |