作者：Observable

外观

饼图 ​

示例 · 饼图生成器计算了将表格数据集表示为饼图或环形图所需的弧度；这些弧度随后可以传递给 弧生成器。（饼图生成器不会直接生成形状。）

pie() ​

源代码 · 使用默认设置构建新的饼图生成器。

js
const pie = d3.pie();

pie(data, ...arguments) ​

源代码 · 为给定的 data 数组生成饼图，返回一个表示每个数据项的弧度对象的数组。例如，给定一组数字，以下是计算饼图弧度的方法

js
const data = [1, 1, 2, 3, 5, 8, 13, 21];
const pie = d3.pie();
const arcs = pie(data);

生成的 arcs 是一个对象的数组

json
[
  {"data":  1, "value":  1, "index": 6, "startAngle": 6.050474740247008, "endAngle": 6.166830023713296, "padAngle": 0},
  {"data":  1, "value":  1, "index": 7, "startAngle": 6.166830023713296, "endAngle": 6.283185307179584, "padAngle": 0},
  {"data":  2, "value":  2, "index": 5, "startAngle": 5.817764173314431, "endAngle": 6.050474740247008, "padAngle": 0},
  {"data":  3, "value":  3, "index": 4, "startAngle": 5.468698322915565, "endAngle": 5.817764173314431, "padAngle": 0},
  {"data":  5, "value":  5, "index": 3, "startAngle": 4.886921905584122, "endAngle": 5.468698322915565, "padAngle": 0},
  {"data":  8, "value":  8, "index": 2, "startAngle": 3.956079637853813, "endAngle": 4.886921905584122, "padAngle": 0},
  {"data": 13, "value": 13, "index": 1, "startAngle": 2.443460952792061, "endAngle": 3.956079637853813, "padAngle": 0},
  {"data": 21, "value": 21, "index": 0, "startAngle": 0.000000000000000, "endAngle": 2.443460952792061, "padAngle": 0}
]

返回数组中的每个对象具有以下属性

此表示形式旨在与弧生成器的默认 startAngle、endAngle 和 padAngle 访问器一起使用。角度以弧度表示，其中 0 在 -y（12 点钟）处，正角度顺时针方向移动。

返回数组的长度与 data 相同，返回数组中的每个元素 i 对应于输入数据中的元素 i。返回的弧度数组与数据顺序相同，即使饼图已 排序 也是如此。

任何额外的 arguments 都是任意的；它们将与 this 对象一起传播到饼图生成器的访问器函数中。

pie.value(value) ​

源代码 · 如果指定了 value，则将值访问器设置为指定的函数或数字，并返回此饼图生成器。

js
const pie = d3.pie().value((d) => d.value);

当 生成 饼图时，将为输入数据数组中的每个元素调用值访问器，并将其作为三个参数传递给元素 d、索引 i 和数组 data。

如果未指定 value，则返回当前值访问器。

js
pie.value() // (d) => d.value

值访问器默认为

js
function value(d) {
  return d;
}

默认值访问器假设输入数据是数字，或者它们可以使用 valueOf 强制转换为数字。如果你的数据不是数字，则应指定一个访问器，该访问器为给定数据项返回相应的数值。例如，给定一个具有 number 和 name 字段的 CSV 文件

number,name
4,Locke
8,Reyes
15,Ford
16,Jarrah
23,Shephard
42,Kwon

你可以说

js
const data = await d3.csv("lost.csv", d3.autoType);
const pie = d3.pie().value((d) => d.number);
const arcs = pie(data);

这类似于在调用饼图生成器之前 映射 你的数据到值

js
const arcs = d3.pie()(data.map((d) => d.number));

访问器的优点是输入数据与返回的对象相关联，从而更容易访问数据的其他字段，例如设置颜色或添加文本标签。

pie.sort(compare) ​

源代码 · 如果指定了 compare，则将数据比较器设置为指定的函数，并返回此饼图生成器。

js
const pie = d3.pie().sort((a, b) => d3.ascending(a.name, b.name));

数据比较器接受两个参数 a 和 b，它们都是来自输入数据数组的元素。如果 a 的弧应该在 b 的弧之前，则比较器必须返回一个小于零的数字；如果 a 的弧应该在 b 的弧之后，则比较器必须返回一个大于零的数字；返回零表示 a 和 b 的相对顺序未指定。

如果未指定 compare，则返回当前数据比较器。

js
pie.sort() // (a, b) => d3.ascending(a.name, b.name))

数据比较器默认为 null。如果数据比较器和 值比较器 都为 null，则弧将按原始输入顺序排列。设置数据比较器将隐式地将值比较器设置为 null。

排序不会影响 生成的弧度数组 的顺序，该顺序始终与输入数据数组相同；它只会影响每个弧的计算角度。第一个弧从 起始角度 开始，最后一个弧在 结束角度 结束。

pie.sortValues(compare) ​

源代码 · 如果指定了 compare，则将值比较器设置为指定的函数，并返回此饼图生成器。

js
const pie = d3.pie().sortValue(d3.ascending);

值比较器类似于 数据比较器，只是两个参数 a 和 b 是使用 值访问器 从输入数据数组中派生的值，而不是数据元素。如果 a 的弧应该在 b 的弧之前，则比较器必须返回一个小于零的数字；如果 a 的弧应该在 b 的弧之后，则比较器必须返回一个大于零的数字；返回零表示 a 和 b 的相对顺序未指定。

如果未指定 compare，则返回当前值比较器。

js
pie.sortValue() // d3.ascending

值比较器默认为 descending。如果数据比较器和值比较器都为 null，则弧将按原始输入顺序排列。设置值比较器将隐式地将 数据比较器 设置为 null。

排序不会影响 生成的弧度数组 的顺序，该顺序始终与输入数据数组相同；它只会影响每个弧的计算角度。第一个弧从 起始角度 开始，最后一个弧在 结束角度 结束。

pie.startAngle(angle) ​

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

js
const pie = d3.pie().startAngle(0);

起始角度是饼图的 *整体* 起始角度，*即*，第一个弧的起始角度。它通常表示为一个常数，但也可以表示为数据的函数。当为函数时，起始角度访问器被调用一次，并传递与 饼图生成器 相同的参数和 this 上下文。

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

js
pie.startAngle() // () => 0

起始角度访问器默认为

js
function startAngle() {
  return 0;
}

角度以弧度表示，其中 0 在 -y（12 点钟）处，正角度顺时针方向移动。

pie.endAngle(angle) ​

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

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

这里的结束角度是指饼图的 *整体* 结束角度，*即*，最后一个弧的结束角度。它通常表示为一个常数，但也可以表示为数据的函数。当为函数时，结束角度访问器被调用一次，并传递与 饼图生成器 相同的参数和 this 上下文。

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

js
pie.endAngle() // () => Math.PI

结束角度访问器的默认值为

js
function endAngle() {
  return 2 * Math.PI;
}

角度以弧度表示，其中 0 在 -y（12 点钟位置），正角度按顺时针方向旋转。结束角度的值限制在 startAngle ± τ，使得 |endAngle - startAngle| ≤ τ。

pie.padAngle(angle) ​

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

js
const pie = d3.pie().padAngle(0.03);

填充角度指定相邻弧之间的角度间隔（以弧度表示）。总填充量是指定angle 乘以输入数据数组中的元素数量，并且最多为 |endAngle - startAngle|；剩余空间按 value 成比例分配，从而保持每个弧的相对面积。

填充角度通常表示为常数，但也可以表示为数据的函数。当为函数时，填充角度访问器会被调用一次，并传递与 饼图生成器 相同的参数和this上下文。

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

js
pie.padAngle() // () => 0.03

填充角度访问器的默认值为

js
function padAngle() {
  return 0;
}