outerRadius() specifies the distance from the arc generator’s origin to an arc’s outside edge. Chained to d3.arc(), it helps define the thickness and overall size of an arc. section 4.4.2
Use outerRadius() with related arc-generator settings:
- Pair it with innerRadius() to define the radial band; values of 80 and 120 pixels produce a ring-like arc. section 4.4.2
- Combine it with padAngle() for spacing and cornerRadius() for rounded arc corners. section 4.4.2
- Pass startAngle and endAngle when generating each path if the angles have already been calculated. section 4.4.2
Precipitation ratio chart
A d3.arc() generator with innerRadius(80) and outerRadius(120) can draw two arcs showing days with and without precipitation. Each path receives its own startAngle and endAngle, producing a complete circular comparison. section 4.4.2
const arcGenerator = d3.arc() .innerRadius(80) .outerRadius(120);
This declaration shows outerRadius() defining the outside boundary alongside innerRadius() before the generator creates SVG path data. section 4.4.2
