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

Skip to content

Return to top

Radial lines ​

=====================================================================

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

lineRadial() ​

---

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

js

const line = d3.lineRadial();

lineRadial(data) ​

---

Source · Equivalent to line .

js

svg.append("path").attr("d", line(data)).attr("stroke", "currentColor");

lineRadial.angle(angle) ​

---

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

js

const line = d3.lineRadial().angle((d) => a(d.Date));

lineRadial.radius(radius) ​

---

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

js

const line = d3.lineRadial().radius((d) => r(d.temperature));

lineRadial.defined(defined) ​

---

Source · Equivalent to line.defined .

js

const line = d3.lineRadial().defined((d) => !isNaN(d.temperature));

lineRadial.curve(curve) ​

---

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

js

const line = d3.lineRadial().curve(d3.curveBasis);

lineRadial.context(context) ​

---

Source · Equivalent to line.context .

js

const context = canvas.getContext("2d");
const line = d3.lineRadial().context(context);