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

    Interface D3TreemapConfig

    Configuration for binding a D3 treemap or sunburst.

    The canonical layout is d3.treemap() / d3.partition() over a d3.hierarchy(), so the datum bound to each mark is a hierarchy node: the binder recognises it and reads the node's own value plus its ancestor chain, exactly as the pie binder unwraps a d3.pie() arc. Both accessors are then read against YOUR datum (node.data), not against the node.

    Every matched element becomes one point, in DOM order — nothing is filtered. A treemap draws only its leaves and a sunburst draws its interior nodes too; whichever you select is what the reader navigates, and the counts have to match for highlighting to survive.

    // svg.selectAll('rect.leaf').data(d3.treemap()(root).leaves())
    bindD3Treemap(svgElement, {
      selector: 'rect.leaf',
      axes: { x: 'Region', y: 'Population, millions' },
    });
    interface D3TreemapConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput };
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        x?: DataAccessor<string | number>;
        y?: DataAccessor<number>;
        path?: DataAccessor<(string | number)[]>;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector x? y? path?

    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 the node elements (e.g. 'rect.leaf', 'path.arc').

    x?: DataAccessor<string | number>

    Accessor for the node's own name, read against your datum.

    'name', falling back to id, label, key, or x. A datum that is a bare string or number names its own node.

    The same accessor names every ancestor when path is derived, so the breadcrumb and the node agree about what things are called.

    y?: DataAccessor<number>

    Accessor for the node's magnitude. Defaults to the value that d3.hierarchy().sum(...) computed — which is what the rectangle's area was drawn from — falling back to value or size on your datum.

    path?: DataAccessor<(string | number)[]>

    Accessor for the node's ancestors, root first and excluding the node itself. Defaults to the hierarchy node's own ancestor chain, so a layout built with d3.hierarchy() needs nothing here.

    Supply it for a tree drawn without d3.hierarchy(): [] (or an omitted value) marks a top-level node.

    Settings

    Member Visibility

    On This Page

    Properties