WebCola
Options
All
  • Public
  • Public/Protected
  • All
Menu

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.

Type parameters

  • This

  • Datum

Hierarchy

  • Arc

Callable

  • __call(this: This, d: Datum, ...args: any[]): string | null
  • __call(this: This, d: Datum, ...args: any[]): void
  • 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 | null

  • 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

Index

Methods

centroid

  • centroid(d: Datum, ...args: any[]): [number, number]
  • 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]

context

  • context(): CanvasRenderingContext2D | null
  • context(context: CanvasRenderingContext2D)
  • context(context: null)
  • Returns the current rendering context, which defaults to null.

    Returns CanvasRenderingContext2D | null

  • Sets the rendering context and returns this arc generator.

    If the context is not null, then the generated arc is rendered to this context as a sequence of path method calls.

    Parameters

    • context: CanvasRenderingContext2D

      The rendering context.

  • Sets the rendering context to null and returns this arc generator.

    A path data string representing the generated arc will be returned when the generator is invoked with data.

    Parameters

    • context: null

      null, to remove rendering context.

cornerRadius

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

    Returns function

      • (this: This, d: Datum, ...args: any[]): number
      • 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.

  • 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: function

      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: This, d: Datum, ...args: any[]): number
        • Parameters

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

          Returns number

endAngle

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

    Returns function

      • (this: This, d: Datum, ...args: any[]): number
      • 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.

  • 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: function

      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: This, d: Datum, ...args: any[]): number
        • Parameters

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

          Returns number

innerRadius

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

    Returns function

      • (this: This, d: Datum, ...args: any[]): number
      • 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.

  • 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: function

      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: This, d: Datum, ...args: any[]): number
        • Parameters

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

          Returns number

outerRadius

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

    Returns function

      • (this: This, d: Datum, ...args: any[]): number
      • 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.

  • 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: function

      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: This, d: Datum, ...args: any[]): number
        • Parameters

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

          Returns number

padAngle

  • padAngle(): function
  • padAngle(angle: number)
  • padAngle(angle: function)
  • 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 function

      • (this: This, d: Datum, ...args: any[]): number
      • 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.

  • 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: function

      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: This, d: Datum, ...args: any[]): number
        • Parameters

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

          Returns number

padRadius

  • padRadius(): function | null
  • padRadius(radius: null)
  • padRadius(radius: number)
  • padRadius(radius: function)
  • 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 function | null

  • Sets the pad radius to null indicating that the pad radius should be automatically computed as sqrt(innerRadius innerRadius + outerRadius outerRadius), and returns this arc generator.

    The pad radius determines the fixed linear distance separating adjacent arcs, defined as padRadius * padAngle.

    Parameters

    • radius: null

      null to set automatic pad radius calculation.

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

    The pad radius determines the fixed linear distance separating adjacent arcs, defined as padRadius * padAngle.

    Parameters

    • radius: number

      A constant radius.

  • Parameters

    • radius: function
        • (this: This, d: Datum, ...args: any[]): number
        • Parameters

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

          Returns number

startAngle

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

    Returns function

      • (this: This, d: Datum, ...args: any[]): number
      • 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.

  • 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: function

      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: This, d: Datum, ...args: any[]): number
        • Parameters

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

          Returns number

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc