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

    Function bindD3Gantt

    • Binds a D3.js gantt chart to MAIDR, generating the accessible data representation.

      Point selector at the interval marks — one <rect> per booked interval. The binder groups them into lanes itself, so a lane holding several intervals needs nothing extra; what it cannot discover is an empty lane, which has no element in the DOM at all. Declare those with lanes.

      Dates become epoch milliseconds. A Date, or a string one parses from, is coerced so the trace can measure lengths; pair it with format: { type: 'date' } so the ends are announced as dates. unit names what a length is counted in, which a bare number cannot say.

      Parameters

      • svg: Element

        The SVG element containing the D3 gantt chart.

      • config: D3GanttConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      Timing — call after D3 has rendered. Like every D3 binder, this reads each matched element's D3-bound __data__; calling it before .data().join() has run (or before the SVG is mounted) throws "No elements found for selector …".

      • MaidrD3
      • useD3Adapter
      const result = bindD3Gantt(svgElement, {
        selector: 'rect.task',
        title: 'Project Schedule',
        axes: { x: 'Day', y: 'Phase' },
        x: 'phase',
        start: 'from',
        end: 'to',
        label: 'task',
        lanes: ['Design', 'Build', 'Review', 'Launch'],
        unit: 'days',
      });

    Settings

    Member Visibility