import{_ as a,c as s,a2 as e,o as l}from"./chunks/framework.BBlBmbNy.js";const c=JSON.parse('{"title":"Radial lines","description":"","frontmatter":{},"headers":[],"relativePath":"d3-shape/radial-line.md","filePath":"d3-shape/radial-line.md"}'),t={name:"d3-shape/radial-line.md"};function n(h,i,d,r,p,k){return l(),s("div",null,i[0]||(i[0]=[e(`
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.
Source · Constructs a new radial line generator with the default settings.
const line = d3.lineRadial();
svg.append("path").attr("d", line(data)).attr("stroke", "currentColor");
Source · Equivalent to line.x, except the accessor returns the angle in radians, with 0 at -y (12 o’clock).
const line = d3.lineRadial().angle((d) => a(d.Date));
Source · Equivalent to line.y, except the accessor returns the radius: the distance from the origin.
const line = d3.lineRadial().radius((d) => r(d.temperature));
Source · Equivalent to line.defined.
const line = d3.lineRadial().defined((d) => !isNaN(d.temperature));
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.
const line = d3.lineRadial().curve(d3.curveBasis);
Source · Equivalent to line.context.
const context = canvas.getContext("2d");
const line = d3.lineRadial().context(context);