作者Observable

外观

圆弧 ​

圆弧生成器产生一个 圆形 或 环形 扇区，就像在 饼图 或 甜甜圈 图表中一样。圆弧以原点为中心；使用 变换 将圆弧移动到不同的位置。

js
svg.append("path")
    .attr("transform", "translate(100,100)")
    .attr("d", d3.arc()({
      innerRadius: 100,
      outerRadius: 200,
      startAngle: -Math.PI / 2,
      endAngle: Math.PI / 2
    }));

如果 起始 和 结束 角（角度跨度）的绝对差值大于 2π，则圆弧生成器将产生一个完整的圆形或环形。如果它小于 2π，则圆弧的角长度将等于两个角之间的绝对差值（如果符号差为正，则按顺时针方向；如果符号差为负，则按逆时针方向）。如果绝对差值小于 2π，则圆弧可能具有 圆角 和 角填充。

另请参见 饼图生成器，它计算必要的角度以将一组数据表示为饼图或甜甜圈图；然后可以将这些角度传递给圆弧生成器。

arc() ​

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

js
const arc = d3.arc();

或者，将半径和角度配置为常量

js
const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);

arc(...arguments) ​

源代码 · 为给定的 arguments 生成一个圆弧。arguments 是任意的；它们会与 this 对象一起传播到圆弧生成器的访问器函数。例如，使用默认设置，期望一个具有半径和角度的对象

js
const arc = d3.arc();

arc({
  innerRadius: 0,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

如果半径和角度是常量，则无需任何参数即可生成圆弧

js
d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2)
  (); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

如果圆弧生成器具有 上下文，则圆弧将以一系列 路径方法 调用渲染到此上下文，并且此函数返回 void。否则，将返回一个 路径数据 字符串。

arc.centroid(...arguments) ​

示例 · 源代码 · 计算由给定 arguments 生成 的圆弧中心线的中间点 [x, y]。

arguments 是任意的；它们会与 this 对象一起传播到圆弧生成器的访问器函数。为了与生成的圆弧一致，访问器必须是确定性的，即，在给定相同参数的情况下返回相同的值。中间点定义为 (startAngle + endAngle) / 2 和 (innerRadius + outerRadius) / 2。例如

请注意，这不是圆弧的几何中心，几何中心可能在圆弧之外；此方法仅仅是用于定位标签的便利工具。

arc.innerRadius(radius) ​

源代码 · 如果指定了 radius，则将内部半径设置为指定的函数或数字，并返回此圆弧生成器。

js
const arc = d3.arc().innerRadius(40);

如果未指定 radius，则返回当前内部半径访问器。

js
arc.innerRadius() // () => 40

内部半径访问器默认设置为

js
function innerRadius(d) {
  return d.innerRadius;
}

将内部半径指定为函数对于构建堆叠极坐标条形图非常有用，通常与 平方根刻度 结合使用。更常见的是，使用恒定内部半径来创建甜甜圈或饼图。如果外部半径小于内部半径，则内部和外部半径将互换。负值将被视为零。

arc.outerRadius(radius) ​

源代码 · 如果指定了 radius，则将外部半径设置为指定的函数或数字，并返回此圆弧生成器。

js
const arc = d3.arc().outerRadius(240);

如果未指定 radius，则返回当前外部半径访问器。

js
arc.outerRadius() // () => 240

外部半径访问器默认设置为

js
function outerRadius(d) {
  return d.outerRadius;
}

将外部半径指定为函数对于构建鸡冠形或极坐标条形图非常有用，通常与 平方根刻度 结合使用。更常见的是，使用恒定外部半径来创建饼图或甜甜圈图。如果外部半径小于内部半径，则内部和外部半径将互换。负值将被视为零。

arc.cornerRadius(radius) ​

示例 · 源代码 · 如果指定了 radius，则将圆角设置为指定的函数或数字，并返回此圆弧生成器。

js
const arc = d3.arc().cornerRadius(18);

如果未指定 radius，则返回当前圆角访问器。

js
arc.cornerRadius() // () => 18

圆角访问器默认设置为

js
function cornerRadius() {
  return 0;
}

如果圆角大于零，则使用给定半径的圆来圆化圆弧的角。对于圆形扇区，将圆化两个外角；对于环形扇区，将圆化所有四个角。

圆角不能大于 (outerRadius - innerRadius) / 2。此外，对于角度跨度小于 π 的圆弧，圆角可能会减少，因为两个相邻的圆角会相交。这在内角中更为常见。参见 圆弧角动画 以作说明。

arc.startAngle(angle) ​

源代码 · 如果指定了 angle，则将起始角设置为指定的函数或数字，并返回此圆弧生成器。

js
const arc = d3.arc().startAngle(Math.PI / 4);

如果未指定 angle，则返回当前起始角访问器。

js
arc.startAngle() // () => 0.7853981633974483

起始角访问器默认设置为

js
function startAngle(d) {
  return d.startAngle;
}

angle 以弧度表示，在 -y（12 点钟）处为 0，正角度按顺时针方向进行。如果 |endAngle - startAngle| ≥ 2π，则会生成一个完整的圆形或环形，而不是一个扇形。

arc.endAngle(angle) ​

源代码 · 如果指定了 angle，则将结束角设置为指定的函数或数字，并返回此圆弧生成器。

js
const arc = d3.arc().endAngle(Math.PI);

如果未指定 angle，则返回当前结束角访问器。

js
arc.endAngle() // () => 3.141592653589793

结束角访问器默认设置为

js
function endAngle(d) {
  return d.endAngle;
}

angle 以弧度表示，在 -y（12 点钟）处为 0，正角度按顺时针方向进行。如果 |endAngle - startAngle| ≥ 2π，则会生成一个完整的圆形或环形，而不是一个扇形。

arc.padAngle(angle) ​

示例 · 源代码 · 如果指定了 angle，则将填充角设置为指定的函数或数字，并返回此圆弧生成器。

js
const arc = d3.arc().padAngle(0);

如果未指定 angle，则返回当前填充角访问器。

js
arc.padAngle() // () => 0

填充角访问器默认设置为

js
function padAngle() {
  return d && d.padAngle;
}

填充角将转换为分离相邻圆弧的固定线性距离，定义为 padRadius × padAngle。此距离将从圆弧的 起始 和 结束 均匀减去。如果圆弧形成一个完整的圆形或环形，例如当 |endAngle - startAngle| ≥ 2π 时，则填充角将被忽略。

如果内半径或角度跨度相对于填充角较小，则可能无法在相邻圆弧之间保持平行边缘。在这种情况下，圆弧的内边缘可能会塌陷成一个点，类似于圆形扇区。出于这个原因，填充通常只应用于环形扇区（即，当 innerRadius 为正时），如该图所示

使用填充时的推荐最小内半径为 outerRadius * padAngle / sin(θ)，其中 θ 是填充前最小圆弧的角度跨度。例如，如果外半径为 200 像素，填充角为 0.02 弧度，则合理的 θ 为 0.04 弧度，合理的内半径为 100 像素。参见圆弧填充动画以作说明。

通常，填充角不会直接设置在圆弧生成器上，而是由饼图生成器计算得出，以确保填充圆弧的面积与其值成正比；参见饼图.padAngle。参见饼图填充动画以作说明。如果您将一个恒定的填充角直接应用于圆弧生成器，它往往会从较小的圆弧中不成比例地减去，从而引入失真。

圆弧.padRadius(半径) ​

来源 · 如果指定了半径，则将填充半径设置为指定的函数或数字，并返回此圆弧生成器。如果未指定半径，则返回当前填充半径访问器，默认值为 null，表示填充半径应自动计算为 sqrt(内半径 × 内半径 + 外半径 × 外半径)。填充半径决定了相邻圆弧之间的固定线性距离，定义为 padRadius × 填充角.

圆弧.context(上下文) ​

来源 · 如果指定了上下文，则设置上下文并返回此圆弧生成器。

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

如果未指定上下文，则返回当前上下文，默认值为 null。

js
arc.context() // context

如果上下文不为 null，则生成的圆弧将作为一系列路径方法调用呈现到此上下文。否则，将返回表示生成的圆弧的路径数据字符串。

圆弧.digits(位数) ​

来源 · 如果指定了位数，则设置小数点后最大位数并返回此圆弧生成器。

js
const arc = d3.arc().digits(3);

如果未指定位数，则返回当前最大小数位数，默认值为 3。

js
arc.digits() // 3

此选项仅在关联的上下文为 null 时适用，如当此圆弧生成器用于生成路径数据时。