The SVG element (or container) containing the D3 bar chart.
Configuration specifying the selector and data accessors.
A D3BinderResult with the MAIDR data and generated layer.
Timing — call after D3 has rendered. This function reads each matched
element's D3-bound __data__: the x (category) and y (numeric) properties
you name via the x / y accessors. 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".
Typical call sites:
selectAll(...).data(...).join(...) chain.useEffect, never during render. Prefer
MaidrD3 / useD3Adapter from maidr/react, which
handle the post-render timing for you..then(...) of your fetch, after drawing.// D3 bar chart with data bound to <rect> elements
const result = bindD3Bar(svgElement, {
selector: 'rect.bar',
title: 'Sales by Quarter',
axes: { x: 'Quarter', y: 'Revenue' },
x: 'quarter', // property name on the bound datum
y: 'revenue', // property name on the bound datum
});
// Use with maidr-data attribute
svgElement.setAttribute('maidr-data', JSON.stringify(result.maidr));
// Or use with React
<Maidr data={result.maidr}><svg>...</svg></Maidr>
Binds a D3.js bar chart to MAIDR, generating the accessible data representation.
Extracts data from D3-bound SVG elements (
<rect>,<path>, etc.) and produces a complete Maidr data structure for sonification, text descriptions, braille output, and keyboard navigation.