Skip to content

径向区域

🌐 Radial areas

示例 · 径向面积生成器类似于笛卡尔坐标系的面积生成器,只是将xy访问器替换为角度半径访问器。径向面积相对于原点定位;使用变换来更改原点。

areaRadial()

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

js
const area = d3.areaRadial();

areaRadial(data)

来源 · 相当于 面积

js
svg.append("path").attr("d", area(data));

areaRadial.角度(angle)

🌐 areaRadial.angle(angle)

来源 · 等同于 area.x,只是访问器返回的角度为弧度,0 在 -y(12 点钟方向)。

js
const area = d3.areaRadial().angle((d) => a(d.Date));

areaRadial.startAngle(angle)

来源 · 等同于 area.x0,不同之处在于访问器返回以弧度为单位的角度,0 位于 -y(12 点钟方向)。注意:通常使用 angle 而不是单独设置起始角和结束角。

areaRadial.endAngle(angle)

来源 · 等同于 area.x1,不同之处在于访问器返回以弧度为单位的角度,0 位于 -y(12 点钟方向)。注意:通常使用 angle 而不是单独设置起始角和结束角。

areaRadial.radius(radius)

来源 · 相当于 area.y,只是访问器返回半径:即到原点的距离。

js
const area = d3.areaRadial().radius((d) => r(d.temperature));

areaRadial.innerRadius(radius)

来源 · 等同于 area.y0,只是访问器返回半径:从原点的距离。

js
const area = d3.areaRadial().radius((d) => r(d.low));

areaRadial.outerRadius(radius)

来源 · 等同于 area.y1,只是访问器返回半径:从原点的距离。

js
const area = d3.areaRadial().radius((d) => r(d.high));

areaRadial.defined(defined)

来源 · 等同于 area.defined

js
const area = d3.areaRadial().defined((d) => !isNaN(d.temperature));

areaRadial.curve(curve)

来源 · 相当于 area.curve。请注意,curveMonotoneXcurveMonotoneY 不推荐用于径向区域,因为它们假定数据在 xy 上是单调的,而在径向区域中通常不成立。

js
const area = d3.areaRadial().curve(d3.curveBasisClosed);

areaRadial.context(context)

来源 · 相当于 area.context

js
const context = canvas.getContext("2d");
const area = d3.areaRadial().context(context);

areaRadial.lineInnerRadius()

areaRadial.lineStartAngle 的别名。

🌐 An alias for areaRadial.lineStartAngle.

areaRadial.lineStartAngle()

来源 · 返回一个新的 径向线生成器,它具有此径向区域生成器当前的 定义访问器曲线上下文。该线的 角度访问器 是此区域的 起始角度访问器,该线的 半径访问器 是此区域的 内半径访问器

areaRadial.lineEndAngle()

来源 · 返回一个新的 径向线生成器,它具有此径向区域生成器当前的 定义访问器曲线上下文。该线的 角度访问器 是此区域的 结束角度访问器,该线的 半径访问器 是此区域的 内半径访问器

areaRadial.lineOuterRadius()

来源 · 返回一个新的 径向线生成器,它具有此径向区域生成器当前的 定义访问器曲线上下文。该线的 角度访问器 是此区域的 起始角度访问器,该线的 半径访问器 是此区域的 外半径访问器