endAngle() is an accessor on D3’s arc generator. It sets an arc’s ending angle, which works with startAngle() to define the arc’s span. Angles must be expressed in radians. section 4.5
Use endAngle() when configuring an arc generator:
- Pass a fixed radian value when drawing one particular arc. section 4.4.3
- Pass d => d.endAngle when each data object supplies its own ending angle. section 5.1.3
- Combine it with innerRadius(), outerRadius(), padAngle(), and cornerRadius() to control the resulting arc. section 5.1.3
Positioning a label inside an arc
const centroid = arcGenerator .startAngle(0) .endAngle(angleDaysWithPrecipitation_rad) .centroid(); The centroid returns horizontal and vertical coordinates that can position a centered SVG text label. section 4.4.3
Listing 5.4 Generating and drawing the arcs (donut-charts.js)
const arcGenerator = d3.arc()
.startAngle(d => d.startAngle) #1
.endAngle(d => d.endAngle)
.innerRadius(60)
.outerRadius(100)
.padAngle(0.02)
.cornerRadius(3);
const arcs = donutContainer
.selectAll(`.arc-${year}`) #2
.data(annotatedData)
.join("path")
.attr("class", `arc-${year}`)
.attr("d", arcGenerator); #3
Inspect the complete data-driven configuration that uses d.endAngle and passes the generator to each SVG path’s d attribute. section 5.1.3
