径向线

¥Radial lines

示例 · 径向线生成器类似于笛卡尔 线生成器，只是 x 和 y 访问器被 angle 和 radius 访问器取代。径向线相对于原点定位；使用 transform 更改原点。

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

const line = d3.lineRadial();

lineRadial(data) {#_lineRadial}

源代码 · 等同于 line。

¥Source · Equivalent to line.

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

lineRadial.angle(angle) {#lineRadial_angle}

源代码 · 等同于 line.x，但它的访问器返回以弧度表示的角度，0 度位于 -y 轴（12 点钟方向）。

¥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));

lineRadial.radius(radius) {#lineRadial_radius}

源代码 · 等同于 line.y，但它的访问器返回的是半径：与原点的距离。

¥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));

lineRadial.defined(defined) {#lineRadial_defined}

源代码 · 等同于 line.defined。

¥Source · Equivalent to line.defined.

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

lineRadial.curve(curve) {#lineRadial_curve}

源代码 · 等同于 line.curve。请注意，不建议将 curveMonotoneX 或 curveMonotoneY 用于径向线，因为它们假设数据在 x 或 y 方向上是单调的，而这通常不适用于径向线。

¥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);

lineRadial.context(context) {#lineRadial_context}

源代码 · 等同于 line.context。

¥Source · Equivalent to line.context.

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