径向线

🌐 Radial lines

示例 · 径向线生成器类似于笛卡尔 线生成器，只是将 x 和 y 访问器替换为 angle 和 radius 访问器。径向线相对于原点定位；使用 transform 来改变原点。

lineRadial()

来源 · 使用默认设置构建一个新的径向线生成器。

const line = d3.lineRadial();

lineRadial(data)

来源 · 相当于 行。

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

lineRadial.angle(angle)

来源 · 等同于 line.x，只是该访问器返回的是弧度值，0 在 -y（12 点钟方向）。

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

lineRadial.radius(radius)

来源 · 相当于 line.y，除了访问器返回半径：即到原点的距离。

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

lineRadial.defined(defined)

来源 · 等同于 line.defined。

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

lineRadial.curve(curve)

来源 · 相当于 line.curve。请注意，不推荐对径向线使用 curveMonotoneX 或 curveMonotoneY，因为它们假设数据在 x 或 y 上是单调的，而对于径向线通常不成立。

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

lineRadial.context(context)

来源 · 相当于 line.context。

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