MAIDR Documentation - v4.4.0
    Preparing search index...
    • Binds a D3.js waterfall chart to MAIDR, generating the accessible data representation.

      Point selector at one element per step — the floating <rect> the bar is drawn as, or a <g> wrapping it and its label. The step's two running totals are read from the datum: start is where the bar's base sits and end where its top does, which is what a waterfall's y scale is already called with.

      Mark the totals. An opening, closing or subtotal bar is drawn exactly like a step but contributes nothing, and no amount of looking at the numbers reveals which bars those are — so pass a kind accessor for them. Without one they are announced as ordinary increases, and the chart's count of increases and decreases includes bars that changed nothing.

      Parameters

      • svg: Element

        The SVG element containing the D3 waterfall chart.

      • config: D3WaterfallConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      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".

      • MaidrD3
      • useD3Adapter
      const result = bindD3Waterfall(svgElement, {
      selector: 'rect.step',
      title: 'Quarterly Budget Bridge',
      axes: { x: 'Step', y: 'Amount (thousands)' },
      x: 'label',
      kind: d => (d.isTotal ? 'total' : undefined),
      });