Radial areas

Examples · A radial area generator is like the Cartesian area generator except the x and y accessors are replaced with angle and radius accessors. Radial areas are positioned relative to the origin; use a transform to change the origin.

areaRadial()

Source · Constructs a new radial area generator with the default settings.

const area = d3.areaRadial();

areaRadial(data)

Source · Equivalent to area.

svg.append("path").attr("d", area(data));

areaRadial.angle(angle)

Source · Equivalent to area.x, except the accessor returns the angle in radians, with 0 at -y (12 o’clock).

const area = d3.areaRadial().angle((d) => a(d.Date));

areaRadial.startAngle(angle)

Source · Equivalent to area.x0, except the accessor returns the angle in radians, with 0 at -y (12 o’clock). Note: typically angle is used instead of setting separate start and end angles.

areaRadial.endAngle(angle)

Source · Equivalent to area.x1, except the accessor returns the angle in radians, with 0 at -y (12 o’clock). Note: typically angle is used instead of setting separate start and end angles.

areaRadial.radius(radius)

Source · Equivalent to area.y, except the accessor returns the radius: the distance from the origin.

const area = d3.areaRadial().radius((d) => r(d.temperature));

areaRadial.innerRadius(radius)

Source · Equivalent to area.y0, except the accessor returns the radius: the distance from the origin.

const area = d3.areaRadial().radius((d) => r(d.low));

areaRadial.outerRadius(radius)

Source · Equivalent to area.y1, except the accessor returns the radius: the distance from the origin.

const area = d3.areaRadial().radius((d) => r(d.high));

areaRadial.defined(defined)

Source · Equivalent to area.defined.

const area = d3.areaRadial().defined((d) => !isNaN(d.temperature));

areaRadial.curve(curve)

Source · Equivalent to area.curve. Note that curveMonotoneX or curveMonotoneY are not recommended for radial areas because they assume that the data is monotonic in x or y, which is typically untrue of radial areas.

const area = d3.areaRadial().curve(d3.curveBasisClosed);

areaRadial.context(context)

Source · Equivalent to area.context.

const context = canvas.getContext("2d");
const area = d3.areaRadial().context(context);

areaRadial.lineInnerRadius()

An alias for areaRadial.lineStartAngle.

areaRadial.lineStartAngle()

Source · Returns a new radial line generator that has this radial area generator’s current defined accessor, curve and context. The line’s angle accessor is this area’s start angle accessor, and the line’s radius accessor is this area’s inner radius accessor.

areaRadial.lineEndAngle()

Source · Returns a new radial line generator that has this radial area generator’s current defined accessor, curve and context. The line’s angle accessor is this area’s end angle accessor, and the line’s radius accessor is this area’s inner radius accessor.

areaRadial.lineOuterRadius()

Source · Returns a new radial line generator that has this radial area generator’s current defined accessor, curve and context. The line’s angle accessor is this area’s start angle accessor, and the line’s radius accessor is this area’s outer radius accessor.