The D3 curve() accessor configures how a shape generator connects data points. Chain it to d3.line() or d3.area(), then pass an interpolator such as d3.curveCatmullRom. section 4.2.2 section 4.3.1
Select the interpolator according to the phenomenon represented:
- Use d3.curveCatmullRom for a smooth curve that passes through the data points. section 4.2.2
- Test alternatives carefully: curveBasis can understate sudden variation, while curveBundle can reduce variation by straightening a curve. section 4.2.2
- Use curve() with area generators as well, interpolating the lower and upper boundaries from accessors such as x(), y0(), and y1(). section 4.3.1
Temperature and ranking charts
A temperature chart can combine d3.curveCatmullRom with an average-temperature line and a minimum-to-maximum area. A rankings chart can use d3.curveMonotoneX and defined() to skip years without values. section 4.2.2 section 8.6.3
Listing 8.14 Preparing the curve generator (Curve.js)
import * as d3 from "d3";
const Curve = props => {
const lineGenerator = d3.line() #1
.x(d => props.xScale(d[props.xAccessor]))
.y(d => props.yScale(d[props.yAccessor]))
.defined(d => d[props.yAccessor] !== null)
.curve(d3.curveMonotoneX);
return (
<path #2
d={lineGenerator(props.data)}
fill="none"
stroke={props.stroke}
strokeWidth={props.strokeWidth}
/>
);
};
export default Curve;
This implementation shows curve() chained after x(), y(), and defined() on a line generator, then used to produce an SVG path. section 8.6.3
