A prop is an input passed into a React component. Functional components receive props as their arguments and use them to produce JSX. Props let a parent supply data, dimensions, scales, labels, styling, or event callbacks while keeping small child components reusable. section 8.3 section 8.6.1
Pass a prop with a JSX attribute, then read it from the component’s props object. A chart container can receive width, height, and margin; a scatterplot can receive data and a color scale. The child uses those inputs to calculate layout and render the appropriate SVG elements. section 8.3 section 8.6.1
Configure a reusable SVG circle
A Circle component receives cx, cy, r, and fill as props, so each mapped data item can render at its own scaled position and color. Optional stroke and strokeWidth props fall back to no stroke and width 0 when omitted. This separates the circle’s SVG markup from the data and scales that configure it. section 8.6.1 section 8.6.1
Props also carry behavior upward through callbacks. A parent can pass an onFilterSelection function to ranking filters; a button calls that function when clicked, and the parent updates active filter state. The new state then changes the visualization’s rendered result. section 8.7
Listing 8.9 Preparing the Circle component (Circle.js)
const Circle = props => {
return (
<circle
cx={props.cx}
cy={props.cy}
r={props.r}
fill={props.fill}
stroke={props.stroke ? props.stroke : "none"}
strokeWidth={props.strokeWidth ? props.strokeWidth : 0}
/>
)
};
export default Circle;
Inspect a focused component that turns position, radius, fill, and optional stroke props directly into SVG circle attributes. section 8.6.1
Listing 8.19 Applying a smooth transition to the curves (Curve.js)
import { useRef, useEffect } from "react"; #1
import * as d3 from "d3";
const Curve = props => {
const lineGenerator = d3.line()
.x(d => props.xScale(d[props.xAccessor]))
.y(d => props.yScale(d[props.yAccessor]))
.defined(d => d[props.yAccessor] !== null)
.curve(d3.curveMonotoneX);
const pathRef = useRef(); #2
useEffect(() => { #3
const path = pathRef.current;
d3.select(path)
.transition()
.duration(400)
.ease(d3.easeCubicOut)
.attr("d", lineGenerator(props.data));
}, [props.data, lineGenerator]); #4
return (
<path
ref={pathRef} #5
fill="none"
stroke={props.stroke}
strokeWidth={props.strokeWidth}
/>
);
};
export default Curve;
Inspect a curve component that uses data, scales, accessors, and stroke settings supplied as props while D3 animates its path. section 8.7
