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

    Interface D3GanttConfig

    Configuration for binding a D3 gantt (timeline, swimlane) chart.

    Point selector at the interval marks — one <rect> per booked interval on a band scale of lanes. The binder groups them into lanes itself: the payload is nested by lane, and the DOM order a chart happens to draw in is not that grouping.

    Dates are coerced to epoch milliseconds. A Date or a date string is turned into a number so the trace can measure lengths at all; pair it with format: { type: 'date' } so the ends are announced as dates rather than as timestamps.

    bindD3Gantt(svgElement, {
      selector: 'rect.task',
      axes: { x: 'Day', y: 'Phase' },
      x: 'phase',
      start: 'from',
      end: 'to',
      label: 'task',
      lanes: ['Design', 'Build', 'Review', 'Launch'],
      unit: 'days',
    });
    interface D3GanttConfig {
        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 | Date>;
        start?: DataAccessor<string | number | Date>;
        end?: DataAccessor<string | number | Date>;
        label?: DataAccessor<string>;
        lanes?: (string | number)[];
        unit?: string;
        orientation?: Orientation;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector x? start? end? label? lanes? unit? orientation?

    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 interval elements (e.g. 'rect.task').

    x?: DataAccessor<string | number | Date>

    Accessor for the lane an interval belongs to.

    'x', falling back to lane, category, label, name, key, group, or task.

    start?: DataAccessor<string | number | Date>

    Accessor for where the interval begins.

    'start', falling back to from, begin, x0, or startDate.

    end?: DataAccessor<string | number | Date>

    Accessor for where the interval ends.

    'end', falling back to to, finish, x1, or endDate.

    label?: DataAccessor<string>

    Accessor for what the interval is called, when the lane is not already its name.

    'label', falling back to name, task, title, or activity. Omitted from the payload when the datum carries none of them.

    lanes?: (string | number)[]

    The lanes, in the order the chart draws them.

    Needed only for empty lanes: a lane with nothing booked has no element in the DOM at all, so the binder cannot discover it, and an empty row is a real statement about a schedule. Lanes carrying intervals name themselves and need no entry here; any the binder finds and this does not declare are appended in the order they were drawn.

    unit?: string

    What a unit of the axis is called — 'days', 'hours', 'weeks'.

    orientation?: Orientation

    Chart orientation.

    Orientation.HORIZONTAL — a gantt drawn the ordinary way runs its bars left to right, which puts the axis on x and the lanes on y. Pass Orientation.VERTICAL for a schedule drawn as columns.

    Settings

    Member Visibility

    On This Page

    Properties