D3

饼图 ​

🌐 Pies

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

pie() ​

来源 · 使用默认设置构建一个新的饼图生成器。

js
const pie = d3.pie();

pie(data, ...arguments) ​

来源 · 为给定的数据数组生成一个饼图，返回一个表示每个数据弧角的对象数组。例如，给定一组数字，下面是如何计算饼图角度的方法：

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

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

🌐 The resulting arcs is an array of objects:

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}
]

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

🌐 Each object in the returned array has the following properties:

此表示法旨在与弧生成器的默认 startAngle、endAngle 和 padAngle 访问器配合使用。角度以弧度表示，0 位于 -y（12 点钟方向），正角度按顺时针方向递增。

🌐 This representation is designed to work with the arc generator’s default startAngle, endAngle and padAngle accessors. Angles are in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise.

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

🌐 The length of the returned array is the same as data, and each element i in the returned array corresponds to the element i in the input data. The returned array of arcs is in the same order as the data, even when the pie chart is sorted.

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

🌐 Any additional arguments are arbitrary; they are propagated to the pie generator’s accessor functions along with the this object.

pie.value(value) ​

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

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

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

🌐 When a pie is generated, the value accessor will be invoked for each element in the input data array, being passed the element d, the index i, and the array data as three arguments.

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

🌐 If value is not specified, returns the current value accessor.

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

值访问器默认为：

🌐 The value accessor defaults to:

js
function value(d) {
  return d;
}

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

🌐 The default value accessor assumes that the input data are numbers, or that they are coercible to numbers using valueOf. If your data are not numbers, then you should specify an accessor that returns the corresponding numeric value for a given datum. For example, given a CSV file with number and name fields:

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

你也可以这样写：

🌐 You might say:

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

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

🌐 This is similar to mapping your data to values before invoking the pie generator:

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

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

🌐 The benefit of an accessor is that the input data remains associated with the returned objects, thereby making it easier to access other fields of the data, for example to set the color or to add text labels.

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 的相对顺序未指定。

🌐 The data comparator takes two arguments a and b, each elements from the input data array. If the arc for a should be before the arc for b, then the comparator must return a number less than zero; if the arc for a should be after the arc for b, then the comparator must return a number greater than zero; returning zero means that the relative order of a and b is unspecified.

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

🌐 If compare is not specified, returns the current data comparator.

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

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

🌐 The data comparator defaults to null. If both the data comparator and the value comparator are null, then arcs are positioned in the original input order. Setting the data comparator implicitly sets the value comparator to null.

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

🌐 Sorting does not affect the order of the generated arc array which is always in the same order as the input data array; it only affects the computed angles of each arc. The first arc starts at the start angle and the last arc ends at the end angle.

pie.sortValues(compare) ​

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

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

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

🌐 The value comparator is similar to the data comparator, except the two arguments a and b are values derived from the input data array using the value accessor rather than the data elements. If the arc for a should be before the arc for b, then the comparator must return a number less than zero; if the arc for a should be after the arc for b, then the comparator must return a number greater than zero; returning zero means that the relative order of a and b is unspecified.

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

🌐 If compare is not specified, returns the current value comparator.

js
pie.sortValues() // d3.ascending

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

🌐 The value comparator defaults to descending. If both the data comparator and the value comparator are null, then arcs are positioned in the original input order. Setting the value comparator implicitly sets the data comparator to null.

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

🌐 Sorting does not affect the order of the generated arc array which is always in the same order as the input data array; it merely affects the computed angles of each arc. The first arc starts at the start angle and the last arc ends at the end angle.

pie.startAngle(angle) ​

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

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

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

🌐 The start angle is the overall start angle of the pie, i.e., the start angle of the first arc. It is typically expressed as a constant number but can also be expressed as a function of data. When a function, the start angle accessor is invoked once, being passed the same arguments and this context as the pie generator.

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

🌐 If angle is not specified, returns the current start angle accessor.

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

起始角度访问器默认为：

🌐 The start angle accessor defaults to:

js
function startAngle() {
  return 0;
}

角度以弧度表示，0 位于 -y（12 点钟方向），正角度顺时针增加。

🌐 Angles are in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise.

pie.endAngle(angle) ​

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

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

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

🌐 The end angle here means the overall end angle of the pie, i.e., the end angle of the last arc. It is typically expressed as a constant number but can also be expressed as a function of data. When a function, the end angle accessor is invoked once, being passed the same arguments and this context as the pie generator.

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

🌐 If angle is not specified, returns the current end angle accessor.

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

结束角度访问器默认为：

🌐 The end angle accessor defaults to:

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

角度以弧度为单位，以 -y（12 点钟方向）为 0，正角顺时针增加。终点角的值受限于 startAngle ± τ，即 |endAngle - startAngle| ≤ τ。

🌐 Angles are in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise. The value of the end angle is constrained to startAngle ± τ, such that |endAngle - startAngle| ≤ τ.

pie.padAngle(angle) ​

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

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

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

🌐 The pad angle specifies the angular separation in radians between adjacent arcs. The total amount of padding is the specified angle times the number of elements in the input data array, and at most |endAngle - startAngle|; the remaining space is divided proportionally by value such that the relative area of each arc is preserved.

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

🌐 The pad angle is typically expressed as a constant number but can also be expressed as a function of data. When a function, the pad angle accessor is invoked once, being passed the same arguments and this context as the pie generator.

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

🌐 If angle is not specified, returns the current pad angle accessor.

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

填充角度访问器默认为：

🌐 The pad angle accessor defaults to:

js
function padAngle() {
  return 0;
}