MAIDR JavaScript API
    Preparing search index...

    Interface D3DirectedGraphConfig

    Configuration for binding a D3 directed graph: a node-link diagram whose links run one way, as a computation graph's do.

    Calling this binder is the declaration: d3 draws a link as a line or a path, and whether an arrowhead marker sits on it says nothing a binder can read reliably. The links are read as D3NetworkConfig reads them, each pointing from its source to its target.

    interface D3DirectedGraphConfig {
        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>;
        nodeSelector?: string;
        node?: DataAccessor<unknown>;
        label?: DataAccessor<string | number>;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector source? target? nodeSelector? node? label?

    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 link elements (e.g. 'line.link').

    source?: DataAccessor<unknown>

    Accessor for the node a link leaves.

    'source', falling back to from or src.

    target?: DataAccessor<unknown>

    Accessor for the node a link arrives at.

    'target', falling back to to or dst.

    nodeSelector?: string

    CSS selector for the node elements, one per node. When given, the nodes are read from these, in DOM order, and the layer outlines the node the reader is on. Without it the nodes are derived from the links, in the order they first appear, and nothing is outlined: a link is not a node.

    node?: DataAccessor<unknown>

    Accessor for a node element's id, which the links' ends name.

    the datum's id, name, key or label, as a d3.forceLink resolves an end.

    label?: DataAccessor<string | number>

    Accessor for what a node element is announced as.

    its id.

    Settings

    Member Visibility

    On This Page

    Properties