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 produces a cubic cardinal spline, can be tensioned from 0 (default) to 1 (straight line segments, such as d3.curveLinear) using the tension() method.
• d3.curveCatmullRom, which produces a cubic...