Source: https://d3js.org/d3-shape/radial-area

Skip to content

Return to top

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.

js

const area = d3.areaRadial();

areaRadial(data) ​

---

Source · Equivalent to area .

js

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).

js

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.

js

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.

js

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.

js

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

areaRadial.defined(defined) ​

---

Source · Equivalent to area.defined .

js

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.

js

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

areaRadial.context(context) ​

---

Source · Equivalent to area.context .

js

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 .