Binds a D3.js polar area (coxcomb, rose) chart to MAIDR, generating the
accessible data representation.
Point selector at the wedge <path> elements, exactly as for
bindD3Pie — including when they were joined to d3.pie() output,
which the binder unwraps for you. The difference is in the reading: a polar
area gives every category the same angle and encodes its value as the
wedge's radius, so the values are a series around the spokes rather than
shares of a whole, and the trace announces them as such (with no
percentages) while panning each spoke to where it is drawn on the dial.
Parameters
svg: Element
The SVG element containing the D3 polar area chart.
A D3BinderResult with the MAIDR data and generated layer.
Remarks
Timing — call after D3 has rendered. Like every D3 binder, this reads
each matched element's D3-bound __data__; calling it before
.data().join() has run (or before the SVG is mounted) throws "No elements
found for selector …" or "Property '…' not found on datum".
See
MaidrD3
useD3Adapter
Example
// svg.selectAll('path.wedge').data(d3.pie().value(d => d.deaths)(rows)) constresult = bindD3PolarArea(svgElement, { selector:'path.wedge', title:'Causes of Mortality', axes: { x:'Month', y:'Deaths' }, x:'month', // property name on YOUR datum, not on the arc });
Binds a D3.js polar area (coxcomb, rose) chart to MAIDR, generating the accessible data representation.
Point
selectorat the wedge<path>elements, exactly as for bindD3Pie — including when they were joined tod3.pie()output, which the binder unwraps for you. The difference is in the reading: a polar area gives every category the same angle and encodes its value as the wedge's radius, so the values are a series around the spokes rather than shares of a whole, and the trace announces them as such (with no percentages) while panning each spoke to where it is drawn on the dial.