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

    Function bindD3Facets

    • Binds a faceted D3 chart (homogeneous small multiples) to MAIDR.

      Every element matched by panelSelector inside the SVG becomes one MAIDR subplot; the per-type binder selected by chartType runs with that panel element as its extraction root, so config.selector (e.g. 'rect.bar') only needs to match marks within a panel.

      Panel display titles come from panelTitle, resolved against each panel element's D3-bound __data__. When panels were joined with d3.groups output ([key, values] tuples) or nest-style { key, values } objects, the group key is used automatically; otherwise the fallback is Panel <n>.

      The grid shape follows layout when given, else panel geometry (bounding boxes, then transform="translate(x,y)"), else a single row in DOM order. Panels are emitted in visual reading order (top-left first).

      Parameters

      • svg: Element

        The SVG element containing all panels.

      • config: D3FacetsConfig

        Panel selector, chart type + per-type config, and options.

      Returns D3MultiPanelResult

      A D3MultiPanelResult with the multi-subplot MAIDR data.

      Timing — call after D3 has rendered, exactly like the single-chart binders: panel elements and their marks must exist with __data__ bound.

      // One <g class="panel"> per cylinder count, each holding rect.bar marks
      const result = bindD3Facets(svgElement, {
        panelSelector: 'g.panel',
        chartType: 'bar',
        config: {
          selector: 'rect.bar',
          title: 'MPG by Origin, faceted by Cylinders',
          axes: { x: 'Origin', y: 'MPG' },
          x: 'origin',
          y: 'mpg',
        },
        panelTitle: d => `cyl = ${d[0]}`, // d3.groups tuple
      });

    Settings

    Member Visibility