Interface Arc<This, Datum>

The arc generator produces a circular or annular sector, as in a pie or donut chart.

If the difference between the start and end angles (the angular span) is greater than τ, the arc generator will produce a complete circle or annulus. If it is less than τ, arcs may have rounded corners and angular padding. Arcs are always centered at ⟨0,0⟩; use a transform (see: SVG, Canvas) to move the arc to a different position.

See also the pie generator, which computes the necessary angles to represent an array of data as a pie or donut chart; these angles can then be passed to an arc generator.

The first generic corresponds to the type of the "this" context within which the arc generator and its accessor functions will be invoked.

The second generic corresponds to the datum type for which the arc is to be generated.

interface Arc {
    centroid(d, ...args): [number, number];
    context(): CanvasRenderingContext2D;
    context(context): Arc<This, Datum>;
    cornerRadius(): ((this, d, ...args) => number);
    cornerRadius(radius): Arc<This, Datum>;
    cornerRadius(radius): Arc<This, Datum>;
    endAngle(): ((this, d, ...args) => number);
    endAngle(angle): Arc<This, Datum>;
    endAngle(angle): Arc<This, Datum>;
    innerRadius(): ((this, d, ...args) => number);
    innerRadius(radius): Arc<This, Datum>;
    innerRadius(radius): Arc<This, Datum>;
    outerRadius(): ((this, d, ...args) => number);
    outerRadius(radius): Arc<This, Datum>;
    outerRadius(radius): Arc<This, Datum>;
    padAngle(): ((this, d, ...args) => number);
    padAngle(angle): Arc<This, Datum>;
    padAngle(angle): Arc<This, Datum>;
    padRadius(): ((this, d, ...args) => number);
    padRadius(radius): Arc<This, Datum>;
    startAngle(): ((this, d, ...args) => number);
    startAngle(angle): Arc<This, Datum>;
    startAngle(angle): Arc<This, Datum>;
    (this, d, ...args): string;
    (this, d, ...args): void;
}

Type Parameters

  • This

  • Datum

  • Generates an arc for the given arguments.

    IMPORTANT: If the rendering context of the arc generator is null, then the arc is returned as a path data string.

    The "this" context within which this function is invoked, will be the context within which the accessor methods of the generator are invoked. All arguments passed into this function, will be passed to the accessor functions of the generator.

    Parameters

    • this: This
    • d: Datum

      The datum for which the arc is to be generated.

    • Rest ...args: any[]

    Returns string

  • Generates an arc for the given arguments.

    IMPORTANT: If the arc generator has been configured with a rendering context, then the arc is rendered to this context as a sequence of path method calls and this function returns void.

    The "this" context within which this function is invoked, will be the context within which the accessor methods of the generator are invoked. All arguments passed into this function, will be passed to the accessor functions of the generator.

    Parameters

    • this: This
    • d: Datum

      The datum for which the arc is to be generated.

    • Rest ...args: any[]

    Returns void

Methods

  • Computes the midpoint [x, y] of the center line of the arc that would be generated by the given arguments.

    To be consistent with the generated arc, the accessors must be deterministic, i.e., return the same value given the same arguments. The midpoint is defined as (startAngle + endAngle) / 2 and (innerRadius + outerRadius) / 2.

    Note that this is not the geometric center of the arc, which may be outside the arc; this method is merely a convenience for positioning labels.

    The method is invoked in the same "this" context as the generator was invoked in and receives the same arguments that are passed into the arc generator.

    Parameters

    • d: Datum

      The datum for which the arc is to be generated.

    • Rest ...args: any[]

    Returns [number, number]

  • Returns the current corner radius accessor, which defaults to a function returning a constant value of zero.

    Returns ((this, d, ...args) => number)

      • (this, d, ...args): number
      • Returns the current corner radius accessor, which defaults to a function returning a constant value of zero.

        Parameters

        • this: This
        • d: Datum
        • Rest ...args: any[]

        Returns number

  • Sets the corner radius to the specified number and returns this arc generator.

    If the corner radius is greater than zero, the corners of the arc are rounded using circles of the given radius. For a circular sector, the two outer corners are rounded; for an annular sector, all four corners are rounded.

    The corner radius may not be larger than (outerRadius - innerRadius) / 2. In addition, for arcs whose angular span is less than π, the corner radius may be reduced as two adjacent rounded corners intersect. This is occurs more often with the inner corners.

    Parameters

    • radius: number

      Constant radius.

    Returns Arc<This, Datum>

  • Sets the corner radius to the specified function and returns this arc generator.

    The corner radius may not be larger than (outerRadius - innerRadius) / 2. In addition, for arcs whose angular span is less than π, the corner radius may be reduced as two adjacent rounded corners intersect. This is occurs more often with the inner corners.

    Parameters

    • radius: ((this, d, ...args) => number)

      An accessor function returning a number to be used as a radius. The accessor function is invoked in the same "this" context as the generator was invoked in and receives the same arguments that were passed into the arc generator.

        • (this, d, ...args): number
        • Parameters

          • this: This
          • d: Datum
          • Rest ...args: any[]

          Returns number

    Returns Arc<This, Datum>

  • Returns the current end angle accessor, which defaults to a function returning the endAngle property of the first argument passed into it.

    Returns ((this, d, ...args) => number)

      • (this, d, ...args): number
      • Returns the current end angle accessor, which defaults to a function returning the endAngle property of the first argument passed into it.

        Parameters

        • this: This
        • d: Datum
        • Rest ...args: any[]

        Returns number

  • Sets the end angle to the specified number and returns this arc generator.

    The angle is specified in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise. If |endAngle - startAngle| ≥ τ, a complete circle or annulus is generated rather than a sector.

    Parameters

    • angle: number

      Constant angle in radians.

    Returns Arc<This, Datum>

  • Sets the end angle to the specified function and returns this arc generator.

    The angle is specified in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise. If |endAngle - startAngle| ≥ τ, a complete circle or annulus is generated rather than a sector.

    Parameters

    • angle: ((this, d, ...args) => number)

      An accessor function returning a number in radians to be used as an angle. The accessor function is invoked in the same "this" context as the generator was invoked in and receives the same arguments that were passed into the arc generator.

        • (this, d, ...args): number
        • Parameters

          • this: This
          • d: Datum
          • Rest ...args: any[]

          Returns number

    Returns Arc<This, Datum>

  • Returns the current inner radius accessor, which defaults to a function returning the innerRadius property of the first argument passed into it.

    Returns ((this, d, ...args) => number)

      • (this, d, ...args): number
      • Returns the current inner radius accessor, which defaults to a function returning the innerRadius property of the first argument passed into it.

        Parameters

        • this: This
        • d: Datum
        • Rest ...args: any[]

        Returns number

  • Sets the inner radius to the specified number and returns this arc generator.

    Specifying the inner radius as a function is useful for constructing a stacked polar bar chart, often in conjunction with a sqrt scale. More commonly, a constant inner radius is used for a donut or pie chart. If the outer radius is smaller than the inner radius, the inner and outer radii are swapped. A negative value is treated as zero.

    Parameters

    • radius: number

      Constant radius.

    Returns Arc<This, Datum>

  • Sets the inner radius to the specified function and returns this arc generator.

    Specifying the inner radius as a function is useful for constructing a stacked polar bar chart, often in conjunction with a sqrt scale. More commonly, a constant inner radius is used for a donut or pie chart. If the outer radius is smaller than the inner radius, the inner and outer radii are swapped. A negative value is treated as zero.

    Parameters

    • radius: ((this, d, ...args) => number)

      An accessor function returning a number to be used as a radius. The accessor function is invoked in the same "this" context as the generator was invoked in and receives the same arguments that were passed into the arc generator.

        • (this, d, ...args): number
        • Parameters

          • this: This
          • d: Datum
          • Rest ...args: any[]

          Returns number

    Returns Arc<This, Datum>

  • Returns the current outer radius accessor, which defaults to a function returning the outerRadius property of the first argument passed into it.

    Returns ((this, d, ...args) => number)

      • (this, d, ...args): number
      • Returns the current outer radius accessor, which defaults to a function returning the outerRadius property of the first argument passed into it.

        Parameters

        • this: This
        • d: Datum
        • Rest ...args: any[]

        Returns number

  • Sets the outer radius to the specified number and returns this arc generator.

    Specifying the outer radius as a function is useful for constructing a coxcomb or polar bar chart, often in conjunction with a sqrt scale. More commonly, a constant outer radius is used for a pie or donut chart. If the outer radius is smaller than the inner radius, the inner and outer radii are swapped. A negative value is treated as zero.

    Parameters

    • radius: number

      Constant radius.

    Returns Arc<This, Datum>

  • Sets the outer radius to the specified function and returns this arc generator.

    Specifying the outer radius as a function is useful for constructing a coxcomb or polar bar chart, often in conjunction with a sqrt scale. More commonly, a constant outer radius is used for a pie or donut chart. If the outer radius is smaller than the inner radius, the inner and outer radii are swapped. A negative value is treated as zero.

    Parameters

    • radius: ((this, d, ...args) => number)

      An accessor function returning a number to be used as a radius. The accessor function is invoked in the same "this" context as the generator was invoked in and receives the same arguments that were passed into the arc generator.

        • (this, d, ...args): number
        • Parameters

          • this: This
          • d: Datum
          • Rest ...args: any[]

          Returns number

    Returns Arc<This, Datum>

  • Returns the current pad angle accessor, which defaults to a function returning the padAngle property of the first argument passed into it, or false if no data are passed in or the property is not defined.

    Returns ((this, d, ...args) => number)

      • (this, d, ...args): number
      • Returns the current pad angle accessor, which defaults to a function returning the padAngle property of the first argument passed into it, or false if no data are passed in or the property is not defined.

        Parameters

        • this: This
        • d: Datum
        • Rest ...args: any[]

        Returns number

  • Sets the pad angle to the specified number and returns this arc generator.

    The pad angle is converted to a fixed linear distance separating adjacent arcs, defined as padRadius * padAngle. This distance is subtracted equally from the start and end of the arc. If the arc forms a complete circle or annulus, as when |endAngle - startAngle| ≥ τ, the pad angle is ignored. If the inner radius or angular span is small relative to the pad angle, it may not be possible to maintain parallel edges between adjacent arcs. In this case, the inner edge of the arc may collapse to a point, similar to a circular sector. For this reason, padding is typically only applied to annular sectors (i.e., when innerRadius is positive).

    The recommended minimum inner radius when using padding is outerRadius * padAngle / sin(θ), where θ is the angular span of the smallest arc before padding. For example, if the outer radius is 200 pixels and the pad angle is 0.02 radians, a reasonable θ is 0.04 radians, and a reasonable inner radius is 100 pixels.

    Often, the pad angle is not set directly on the arc generator, but is instead computed by the pie generator so as to ensure that the area of padded arcs is proportional to their value; see pie.padAngle. See the pie padding animation for illustration. If you apply a constant pad angle to the arc generator directly, it tends to subtract disproportionately from smaller arcs, introducing distortion.

    Parameters

    • angle: number

      Constant angle in radians.

    Returns Arc<This, Datum>

  • Sets the pad angle to the specified function and returns this arc generator.

    The pad angle is converted to a fixed linear distance separating adjacent arcs, defined as padRadius * padAngle. This distance is subtracted equally from the start and end of the arc. If the arc forms a complete circle or annulus, as when |endAngle - startAngle| ≥ τ, the pad angle is ignored. If the inner radius or angular span is small relative to the pad angle, it may not be possible to maintain parallel edges between adjacent arcs. In this case, the inner edge of the arc may collapse to a point, similar to a circular sector. For this reason, padding is typically only applied to annular sectors (i.e., when innerRadius is positive).

    The recommended minimum inner radius when using padding is outerRadius * padAngle / sin(θ), where θ is the angular span of the smallest arc before padding. For example, if the outer radius is 200 pixels and the pad angle is 0.02 radians, a reasonable θ is 0.04 radians, and a reasonable inner radius is 100 pixels.

    Often, the pad angle is not set directly on the arc generator, but is instead computed by the pie generator so as to ensure that the area of padded arcs is proportional to their value; see pie.padAngle. See the pie padding animation for illustration. If you apply a constant pad angle to the arc generator directly, it tends to subtract disproportionately from smaller arcs, introducing distortion.

    Parameters

    • angle: ((this, d, ...args) => number)

      An accessor function returning a number in radians to be used as an angle. The accessor function is invoked in the same "this" context as the generator was invoked in and receives the same arguments that were passed into the arc generator.

        • (this, d, ...args): number
        • Parameters

          • this: This
          • d: Datum
          • Rest ...args: any[]

          Returns number

    Returns Arc<This, Datum>

  • Returns the current pad radius accessor, which defaults to null, indicating that the pad radius should be automatically computed as sqrt(innerRadius * innerRadius + outerRadius * outerRadius).

    Returns ((this, d, ...args) => number)

      • (this, d, ...args): number
      • Parameters

        • this: This
        • d: Datum
        • Rest ...args: any[]

        Returns number

  • Sets the pad radius to the specified function or number and returns this arc generator. The pad radius determines the fixed linear distance separating adjacent arcs, defined as padRadius * padAngle.

    Parameters

    • radius: number | ((this, d, ...args) => number)

    Returns Arc<This, Datum>

  • Returns the current start angle accessor, which defaults to a function returning the startAngle property of the first argument passed into it.

    Returns ((this, d, ...args) => number)

      • (this, d, ...args): number
      • Returns the current start angle accessor, which defaults to a function returning the startAngle property of the first argument passed into it.

        Parameters

        • this: This
        • d: Datum
        • Rest ...args: any[]

        Returns number

  • Sets the start angle to the specified number and returns this arc generator.

    The angle is specified in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise. If |endAngle - startAngle| ≥ τ, a complete circle or annulus is generated rather than a sector.

    Parameters

    • angle: number

      Constant angle in radians.

    Returns Arc<This, Datum>

  • Sets the start angle to the specified function and returns this arc generator.

    The angle is specified in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise. If |endAngle - startAngle| ≥ τ, a complete circle or annulus is generated rather than a sector.

    Parameters

    • angle: ((this, d, ...args) => number)

      An accessor function returning a number in radians to be used as an angle. The accessor function is invoked in the same "this" context as the generator was invoked in and receives the same arguments that were passed into the arc generator.

        • (this, d, ...args): number
        • Parameters

          • this: This
          • d: Datum
          • Rest ...args: any[]

          Returns number

    Returns Arc<This, Datum>