A defined accessor is a function on a D3 line generator that decides whether each data point contributes to the generated path. In a rankings chart, it excludes years whose rank is null, so incomplete framework histories can still produce usable curves. section 8.6.3
Skipping missing ranking data
Configure the generator with x and y accessors, then test the y value: .defined(d => d[props.yAccessor] !== null). Call the generator when assigning the SVG path's d attribute. 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;
Inspect the complete Curve component, including the defined accessor, monotone curve choice, and path rendering. section 8.6.3
