Chart primitives
Layouts & specialized
Interactions
Data utilities
Umbrella package
@vx/curve
Installation
npm install --save @vx/curve
Overview
The @vx/curve
package is a wrapper of the d3-shape curve
functions. A curve
is a function that can be passed into other vx
objects that draw lines or
paths, such as a LinePath
, to change the way the line between points is drawn. Click on the
example below for an interactive way to explore curve aesthetics.
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} />)
Functions
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 |
Examples
Curves
<Curve.* /> <Shape.Line />