@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

vxd3
curveBasiscurveBasis
curveBasisClosecurveBasisClosed
curveBasisOpencurveBasisOpen
curveStepcurveStep
curveStepAftercurveStepAfter
curveStepBeforecurveStepbefore
curveBundlecurveBundle
curveLinearcurveLinear
curveLinearClosedcurveLinearClosed
curveMonotoneXcurveMonotoneX
curveMonotoneYcurveMonotoneY
curveCardinalcurveCardinal
curveCardinalClosedcurveCardinalClosed
curveCardinalOpencurveCardinalOpen
curveCatmullRomcurveCatmullRom
curveCatmullRomClosedcurveCatmullRomClosed
curveCatmullRomOpencurveCatmullRomOpen
curveNaturalcurveNatural

Examples