跳至内容

径向线

示例 · 径向线生成器类似于笛卡尔 线生成器,不同之处在于 xy 访问器被替换为 angleradius 访问器。径向线相对于原点定位;使用 transform 改变原点。

lineRadial()

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

js
const line = d3.lineRadial();

lineRadial(data)

源代码 · 等同于 line.

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

lineRadial.angle(angle)

源代码 · 等同于 line.x,不同之处在于访问器返回以弧度为单位的角度,其中 0 在 -y(12 点钟)处。

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

lineRadial.radius(radius)

源代码 · 等同于 line.y,不同之处在于访问器返回半径:到原点的距离。

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

lineRadial.defined(defined)

源代码 · 等同于 line.defined.

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

lineRadial.curve(curve)

源代码 · 等同于 line.curve。请注意,curveMonotoneXcurveMonotoneY 不建议用于径向线,因为它们假设数据在 xy 中是单调的,而这在径向线中通常不成立。

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

lineRadial.context(context)

源代码 · 等同于 line.context.

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