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

    Interface D3SegmentedConfig

    Configuration for binding a D3 segmented bar chart (stacked, dodged, or normalized).

    Supports two common D3 patterns:

    1. Flat structure (no groupSelector): All bar <rect> elements are queried from the SVG root, and each element's datum must include x, y, and fill.

    2. d3.stack() structure (with groupSelector): Each series lives in a <g> group element whose datum has a .key property identifying the series. Use function accessors to extract values from the d3.stack() tuple format.

    // d3.stack() pattern
    bindD3Segmented(svg, {
      groupSelector: 'g.series',
      selector: 'rect',
      type: 'stacked_bar',
      x: (d) => d.data.category,
      y: (d) => d[1] - d[0],
    });
    interface D3SegmentedConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput };
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        groupSelector?: string;
        type?: SegmentedTraceType;
        x?: DataAccessor<string | number>;
        y?: DataAccessor<string | number>;
        fill?: DataAccessor<string>;
        domOrder?: "subject-major" | "series-major";
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector groupSelector? type? x? y? fill? domOrder?

    Properties

    id?: string

    Unique identifier for the chart. Used as the MAIDR id.

    title?: string

    Chart title displayed in text descriptions.

    subtitle?: string

    Chart subtitle.

    caption?: string

    Chart caption.

    axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput }

    Axis configuration. Each axis may be provided as either a plain string (shorthand for { label: value }) or a full AxisConfig object (for per-axis format, or grid navigation on scatter).

    For heatmaps and segmented bar charts, use fill for the color/category axis; the binder maps it to the canonical z axis in the MAIDR schema.

    Type Declaration

    format?: AxisFormat

    Optional formatting configuration applied to axes that do not specify their own format. Per-axis format on AxisConfig takes precedence.

    autoApply?: boolean

    When true (the default), the binder writes the generated MAIDR schema to the SVG as a maidr-data attribute so vanilla-JS users don't need to call svg.setAttribute(...) themselves. The returned result is unchanged either way.

    Set to false if you are driving MAIDR yourself — e.g. passing the returned schema to <Maidr data={...}> or persisting it elsewhere. The React adapter (useD3Adapter, MaidrD3) forces this to false internally so it can stay in control of the schema.

    true
    selector: string

    CSS selector for all bar segment elements (e.g., 'rect.bar', 'rect').

    groupSelector?: string

    CSS selector for series group elements (e.g., 'g.series'). When provided, bar segments are queried within each group and the fill/series key is read from each group's D3 datum .key property (standard d3.stack() output) unless overridden by the fill accessor.

    type?: SegmentedTraceType

    The type of segmented chart.

    TraceType.STACKED
    x?: DataAccessor<string | number>

    Accessor for the x-axis (category) value.

    'x'
    y?: DataAccessor<string | number>

    Accessor for the y-axis (numeric) value.

    'y'
    fill?: DataAccessor<string>

    Accessor for the fill/group identifier.

    'fill'
    domOrder?: "subject-major" | "series-major"

    Hint for how the rendered <rect> elements are ordered in the DOM.

    • 'subject-major' — rects are interleaved by category then series, e.g. [Cat0-A, Cat0-B, Cat0-C, Cat1-A, ...]. This is the result of a single flat selectAll(...).data(flatArr).join(...) call and matches the typical D3 dodged-bar pattern.
    • 'series-major' — all of series 0 first, then all of series 1, etc., e.g. [A-Cat0..CatN, B-Cat0..CatN, ...]. This is produced by looping regions.forEach(r => selectAll(...).data(byRegion[r]).join(...)) and matches the typical D3 stacked-bar pattern, as well as d3.stack() with groupSelector.

    When omitted, the binder auto-detects from the rendered fills and falls back to type-based defaults (stacked_bar / normalized_bar → series-major, dodged_bar → subject-major).

    Settings

    Member Visibility

    On This Page

    Properties