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

    Interface D3NetworkConfig

    Configuration for binding a D3 force-directed network.

    Point selector at the links — one <line> per edge — rather than at the node circles: the nodes are derived from the links, so a link is what maps one-to-one onto the payload, and it is what the chart draws between a pair of nodes.

    Positions are deliberately not read. Where a force-directed node lands is a fact about the solver's seed rather than about the data.

    bindD3Network(svgElement, {
      selector: 'line.link',
      axes: { x: 'Person', y: 'Links' },
    });
    interface D3NetworkConfig {
        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>;
    }

    Hierarchy (View Summary)

    Index

    Properties

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

    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.

    d3.forceLink replaces each link's source with the node object it resolved the id to, so the resolved value is normalised either way: an object end is read through its id, name, key or label.

    target?: DataAccessor<unknown>

    Accessor for the node a link arrives at.

    'target', falling back to to or dst. Normalised the same way as D3NetworkConfig.source.

    Settings

    Member Visibility

    On This Page

    Properties