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

    Function bindD3Subplots

    • Binds a heterogeneous grid of D3 charts (one SVG, several independently drawn panels of possibly different chart types) to MAIDR.

      Each entry names a chart type, its binder config, and the panel's DOM root (an element or a CSS selector resolved against container). The matching per-type binder runs against that root and the resulting layer becomes one MAIDR subplot.

      Pass subplots as a 2D array for an explicit row-major grid (ragged rows allowed), or as a flat array arranged via layout / geometry inference — see D3PanelLayout.

      Parameters

      • container: Element

        The SVG (or wrapping element) containing all panels.

      • spec: D3SubplotsConfig

        Figure-level fields plus the panel entries.

      Returns D3MultiPanelResult

      A D3MultiPanelResult with the multi-subplot MAIDR data.

      const result = bindD3Subplots(svgElement, {
        title: 'Sales Overview',
        subplots: [[
          { chartType: 'bar', root: 'g.revenue', config: { selector: 'rect.bar', title: 'Revenue' } },
          { chartType: 'line', root: 'g.trend', config: { selector: 'path.line', title: 'Trend' } },
        ]],
      });

    Settings

    Member Visibility