visx curve

Usage no npm install needed!

<script type="module">
  import visxCurve from 'https://cdn.skypack.dev/@visx/curve';




npm install --save @visx/curve


The @visx/curve package is a wrapper of the d3-shape curve functions. A curve is a function that can be passed into other visx 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 visx like so:

import { curveCatmullRomOpen } from '@visx/curve';
let line = (<Shape.LinePath curve={curveCatmullRomOpen} />)

// or if you want namespace all Curves under the `Curve`
import * as Curve from `@visx/curve`;
let line = (<Shape.LinePath curve={Curve.curveCatmullRomOpen} />)


visx 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