The SVG element containing the D3 segmented 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/y/fill bound to each bar segment —
or, with groupSelector, the d3.stack() tuple plus the parent group's
.key. 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.// Flat structure: each rect has { x, y, fill } data
const result = bindD3Segmented(svgElement, {
selector: 'rect.bar',
type: 'stacked_bar',
title: 'Revenue by Region and Quarter',
axes: { x: 'Quarter', y: 'Revenue', fill: 'Region' },
x: 'quarter',
y: 'revenue',
fill: 'region',
});
// d3.stack() structure: groups contain segments
const result = bindD3Segmented(svgElement, {
groupSelector: 'g.series',
selector: 'rect',
type: 'stacked_bar',
title: 'Revenue by Region and Quarter',
x: (d) => d.data.category,
y: (d) => d[1] - d[0],
});
Binds a D3.js segmented bar chart (stacked, dodged, or normalized) to MAIDR.
Segmented bar charts extend regular bar charts with a
filldimension that identifies the segment/group within each bar. The data is organized as a 2D array where each inner array represents a series/group.