MAIDR Documentation - v3.65.0
    Preparing search index...

    Function bindD3Histogram

    • Binds a D3.js histogram to MAIDR, generating the accessible data representation.

      D3 histograms are typically created with d3.bin() (or d3.histogram() in v5), which produces arrays with x0 and x1 properties for bin boundaries. This binder extracts bin data from D3-bound rect elements.

      Parameters

      • svg: Element

        The SVG element containing the D3 histogram.

      • config: D3HistogramConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      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 bin boundaries (x0/x1) and count bound to each bar — typically produced by d3.bin(). 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:

      • Vanilla JS: right after your selectAll(...).data(...).join(...) chain.
      • React: inside useEffect, never during render. Prefer MaidrD3 / useD3Adapter from maidr/react, which handle the post-render timing for you.
      • Async data: inside the .then(...) of your fetch, after drawing.
      • MaidrD3
      • useD3Adapter
      // D3 histogram using d3.bin()
      const result = bindD3Histogram(svgElement, {
        selector: 'rect.bar',
        title: 'Age Distribution',
        axes: { x: 'Age', y: 'Count' },
        x: (d) => `${d.x0}-${d.x1}`,
        y: (d) => d.length,
        xMin: 'x0',
        xMax: 'x1',
        yMin: () => 0,
        yMax: (d) => d.length,
      });

    Settings

    Member Visibility