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

    Function bindD3Line

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

      Supports both single-line and multi-line charts. Data can be extracted from:

      1. D3-bound data on point elements (circles, etc.) via pointSelector. When using pointSelector, each line path and its associated points must share the same parent <g> group element for correct scoping.
      2. D3-bound data on the path elements themselves (array of points per path).

      Parameters

      • svg: Element

        The SVG element containing the D3 line chart.

      • config: D3LineConfig

        Configuration specifying selectors 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__: an array of points per line path, or individual point data when pointSelector is set. 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
      // Multi-line chart with paths and point circles
      const result = bindD3Line(svgElement, {
        selector: 'path.line',
        pointSelector: 'circle.data-point',
        title: 'Temperature Over Time',
        axes: { x: 'Month', y: 'Temperature (F)' },
        x: 'month',
        y: 'temp',
        fill: 'city',
      });

    Settings

    Member Visibility