Learn D3.js

Curve functions

Curve factory functions change the way a line is interpolated between data points. The default factory for new lines and areas is d3.curveLinear, but that can be overridden by calling the .curve() method with one of the factories illustrated and listed in the diagram that follows:

Built-in curve types Code: Curves/1-curves.html

For example, the following code will replace the straight line segments with a monotonic curve in relation to the x axis:

const line = d3.line()               .x(d => scaleX(d[0]))               .y(d => scaleY(d[1]))               .curve(d3.curveMonotoneX);

Three types of curve can be fine-tuned with additional methods:

• d3.curveCardinal, which ...