@vx/curve

npm install --save @vx/curve

Overview

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} />)

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 |