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

    Function bindD3Heatmap

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

      Extracts cell data from D3-bound SVG elements (<rect>) organized in a grid and produces a complete Maidr data structure. The cells are grouped by their x and y category values to form the 2D points grid.

      Parameters

      • svg: Element

        The SVG element containing the D3 heatmap.

      • config: D3HeatmapConfig

        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 x/y category pair and cell value bound to each heatmap cell. 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

      Error if any cell coordinate pair is missing from the extracted data.

      const result = bindD3Heatmap(svgElement, {
        selector: 'rect.cell',
        title: 'Correlation Matrix',
        axes: { x: 'Variable', y: 'Variable', fill: 'Correlation' },
        x: 'xVar',
        y: 'yVar',
        value: 'correlation',
      });

    Settings

    Member Visibility