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

    Interface D3PieConfig

    Configuration for binding a D3 pie or doughnut chart.

    The canonical D3 pie is d3.pie() + d3.arc() drawn as one <path> per slice, so selector should match those paths. Both accessors are read against YOUR datum, not the arc the layout wraps it in — the binder unwraps the arc first.

    bindD3Pie(svg, {
      selector: 'path.slice',
      axes: { x: 'Fruit', y: 'Units' },
      x: 'fruit',
    });
    interface D3PieConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        x?: DataAccessor<string | number>;
        y?: DataAccessor<number>;
        axes?: { x?: D3AxisInput; y?: D3AxisInput };
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? format? autoApply? selector x? y? axes?

    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.

    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 wedge elements (e.g., 'path.slice', 'path.arc').

    x?: DataAccessor<string | number>

    Accessor for the slice label.

    'x', falling back to label, name, category, or key when the datum has one of those instead. A datum that is a bare number or string labels its own slice.

    y?: DataAccessor<number>

    Accessor for the slice magnitude. Defaults to the value d3.pie() itself computed for the slice, which is what the drawn angle is proportional to; supply this only for a pie drawn without the layout.

    axes?: { x?: D3AxisInput; y?: D3AxisInput }

    Axis labels. A pie has no fill axis: the share of the whole is derived from the values themselves, so there is nothing for a third axis to name.

    Type Declaration

    • Optionalx?: D3AxisInput

      What the slice labels mean, e.g. 'Fruit'.

    • Optionaly?: D3AxisInput

      What the slice values measure, e.g. 'Units'.

    Settings

    Member Visibility

    On This Page

    Properties