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

    Interface D3FlowConfig

    Configuration for binding a D3 sankey, alluvial or chord diagram.

    Point selector at the ribbons — one <path> per link — rather than at the node rectangles: the nodes are derived from the links exactly as a network's are, so a link is what maps one-to-one onto the payload.

    d3-sankey replaces each link's source and target with the node objects it resolved them to, the way d3.forceLink does, so an object end is read through its id, name, key or label. d3.chord() is the one that needs help: its ends are the matrix's row and column indices, which is what D3FlowConfig.names is for.

    bindD3Sankey(svgElement, {
      selector: 'path.ribbon',
      axes: { x: 'Node', y: 'Petajoules' },
    });
    interface D3FlowConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput };
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        source?: DataAccessor<unknown>;
        target?: DataAccessor<unknown>;
        value?: DataAccessor<number>;
        names?: (string | number)[];
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector source? target? value? names?

    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 ribbon elements (e.g. 'path.ribbon').

    source?: DataAccessor<unknown>

    Accessor for the node a flow leaves.

    'source', falling back to from or src. An object end is named through its id, name, key or label, or — for a chord — through D3FlowConfig.names.

    target?: DataAccessor<unknown>

    Accessor for the node a flow arrives at.

    'target', falling back to to or dst. Named the same way as D3FlowConfig.source.

    value?: DataAccessor<number>

    Accessor for how much flows.

    'value', falling back to weight, amount, count, or y. When the datum carries none of them, the magnitude d3.chord() put on each end (d.source.value) is used, which is what the ribbon's width was drawn from.

    names?: (string | number)[]

    What the matrix's rows are called, in matrix order — the labels a chord diagram draws around the dial.

    d3.chord() binds { index, value, … } to each end rather than a name, because a matrix has no names in it. Without this a chord announces its ends as the bare indices they are; with it, the reader is told which groups the ribbon joins.

    Settings

    Member Visibility

    On This Page

    Properties