MAIDR Documentation - v4.4.0
    Preparing search index...

    Function bindD3Pie

    • Binds a D3.js pie or doughnut chart to MAIDR, generating the accessible data representation.

      Extracts data from the wedge <path> elements produced by the canonical d3.pie() + d3.arc() pair and produces a complete Maidr data structure for sonification, text descriptions, braille output, and keyboard navigation. A pie is one row of slices: left and right move between them.

      Parameters

      • svg: Element

        The SVG element (or container) containing the D3 pie chart.

      • config: D3PieConfig

        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__. When the marks were joined to d3.pie() output — the usual case — the slice magnitude is taken from the arc's value, which is what the layout itself drew the angle from, so only the label accessor is normally needed. Calling the binder 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.

      Slice order. d3.pie() returns its arcs in the input data order even when it sorts them by value for drawing, so the wedges a single .data(pie(data)).join('path') produces are already in the order MAIDR needs: matched element k is data point k.

      • MaidrD3
      • useD3Adapter
      // svg.selectAll('path.slice').data(d3.pie().value(d => d.units)(data))
      const result = bindD3Pie(svgElement, {
        selector: 'path.slice',
        title: 'Fruit sales',
        axes: { x: 'Fruit', y: 'Units' },
        x: 'fruit',   // property name on YOUR datum, not on the arc
      });

    Settings

    Member Visibility