The SVG element containing the D3 area chart.
Configuration specifying selectors, accessors, and variant.
A D3BinderResult with the MAIDR data and generated layer.
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".
// d3.stack() + d3.area().y0(d => y(d[0])).y1(d => y(d[1]))
const series = d3.stack().keys(['Subscriptions', 'Services'])(rows);
svg.selectAll('path.area').data(series).join('path').attr('d', area);
bindD3Area(svgElement, {
selector: 'path.area',
type: TraceType.STACKED_AREA,
title: 'Revenue by Product',
axes: { x: 'Year', y: 'Revenue', fill: 'Product' },
x: 'year', // a key on the stacked row, not on the [y0, y1] tuple
});
Binds a D3.js area chart to MAIDR, generating the accessible data representation.
Handles all three variants through
config.type: independent bands (TraceType.AREA, the default), stacked areas and streamgraphs (TraceType.STACKED_AREA), and 100% stacked areas (TraceType.NORMALIZED_AREA). The variant decides how the layer is read: a stacked trace announces the running total at each x, and the point's share of it, alongside the band's own value.Two D3 patterns are supported, and the binder tells them apart by the datum bound to the first matched
<path>:d3.stack()output — the series array itself, with.key, whose items are[y0, y1]tuples.xis read from each tuple's.datarow (function accessors included, so writed => d.year, notd => d.data.year),yis the band's own height (y1 - y0, which is what the trace needs — it re-derives the running total itself), and.keynames the series.{ x, y }array per<path>, or per-point elements viapointSelector. Read exactly as bindD3Line reads them.