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

    Function bindD3Scatter

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

      Extracts x/y data from D3-bound SVG point elements (<circle>, <use>, etc.) and produces a complete Maidr data structure.

      Parameters

      • svg: Element

        The SVG element containing the D3 scatter plot.

      • config: D3ScatterConfig

        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 numeric x/y bound to each point element. 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
      const result = bindD3Scatter(svgElement, {
        selector: 'circle.dot',
        title: 'Height vs Weight',
        axes: { x: 'Height (cm)', y: 'Weight (kg)' },
        x: 'height',
        y: 'weight',
      });

    Settings

    Member Visibility