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

    Function bindD3Smooth

    • Binds a D3.js smooth/regression curve to MAIDR.

      Smooth plots represent fitted curves (e.g., LOESS, regression lines). The data includes both the data-space coordinates (x, y) and SVG-space coordinates (svg_x, svg_y) for each point along the curve.

      Parameters

      • svg: Element

        The SVG element containing the D3 smooth curve.

      • config: D3SmoothConfig

        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__: both the data-space (x/y) and SVG-space (svg_x/svg_y) coords bound to each curve point. 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 = bindD3Smooth(svgElement, {
        selector: 'circle.smooth-point',
        title: 'LOESS Regression',
        axes: { x: 'X', y: 'Y (predicted)' },
        x: 'x',
        y: 'yPredicted',
        svgX: 'screenX',
        svgY: 'screenY',
      });

    Settings

    Member Visibility