饼图
¥Pies
示例 · 饼图生成器计算将表格数据集表示为饼图或环形图所需的角度;然后,这些角度可以传递给 圆弧生成器 函数。(饼图生成器不会直接生成形状。)
¥Examples · The pie generator computes the necessary angles to represent a tabular dataset as a pie or donut chart; these angles can then be passed to an arc generator. (The pie generator does not produce a shape directly.)
pie()
源代码 · 使用默认设置构造一个新的饼图生成器。
¥Source · Constructs a new pie generator with the default settings.
const pie = d3.pie();
pie(data, ...arguments) {#_pie}
源代码 · 根据给定的数据数组生成一个饼图,并返回一个表示每个数据点弧度的对象数组。例如,给定一组数字,以下是如何计算饼图的角度:
¥Source · Generates a pie for the given array of data, returning an array of objects representing each datum’s arc angles. For example, given a set of numbers, here is how to compute the angles for a pie chart:
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:
[
{"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:
data
- 输入基准;输入数据数组中的对应元素。¥
data
- the input datum; the corresponding element in the input data array.value
- 圆弧的数字 value。¥
value
- the numeric value of the arc.index
- 圆弧的从零开始的 排序索引。¥
index
- the zero-based sorted index of the arc.startAngle
- 弧的 起始角度。¥
startAngle
- the start angle of the arc.endAngle
- 弧的 结束角度。¥
endAngle
- the end angle of the arc.padAngle
- 弧的 填充角度。¥
padAngle
- the pad angle of the arc.
此表示旨在与弧生成器的默认 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.
返回数组的长度与数据的长度相同,返回数组中的每个元素 i 都与输入数据中的元素 i 相对应。返回的弧数组与数据的顺序相同,即使饼图是 sorted 也是如此。
¥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) {#pie_value}
源代码 · 如果指定了 value,则将值访问器设置为指定的函数或数字并返回此饼图生成器。
¥Source · If value is specified, sets the value accessor to the specified function or number and returns this pie generator.
const pie = d3.pie().value((d) => d.value);
当饼图为 generated 时,将为输入数据数组中的每个元素调用值访问器,并传递元素 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.
如果未指定值,则返回当前值访问器。
¥If value is not specified, returns the current value accessor.
pie.value() // (d) => d.value
值访问器默认为:
¥The value accessor defaults to:
function value(d) {
return d;
}
默认值访问器假定输入数据是数字,或者可以使用 valueOf 强制转换为数字。如果你的数据不是数字,则应指定一个访问器,该访问器返回给定数据的相应数值。例如,给定一个包含数字和名称字段的 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:
const data = await d3.csv("lost.csv", d3.autoType);
const pie = d3.pie().value((d) => d.number);
const arcs = pie(data);
这类似于在调用饼图生成器之前将数据 mapping 转换为值:
¥This is similar to mapping your data to values before invoking the pie generator:
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) {#pie_sort}
源代码 · 如果指定了 compare,则将数据比较器设置为指定的函数,并返回此饼图生成器。
¥Source · If compare is specified, sets the data comparator to the specified function and returns this pie generator.
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.
pie.sort() // (a, b) => d3.ascending(a.name, b.name))
数据比较器默认为 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) {#pie_sortValues}
源代码 · 如果指定了 compare,则将值比较器设置为指定的函数并返回饼图生成器。
¥Source · If compare is specified, sets the value comparator to the specified function and returns this pie generator.
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.
pie.sortValues() // d3.ascending
值比较器默认为 descending。如果 数据比较器 和值比较器都为空,则圆弧将按原始输入顺序定位。设置值比较器会隐式地将 数据比较器 设置为 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) {#pie_startAngle}
源代码 · 如果指定了角度,则将饼图的整体起始角度设置为指定的函数或数字并返回此饼图生成器。
¥Source · If angle is specified, sets the overall start angle of the pie to the specified function or number and returns this pie generator.
const pie = d3.pie().startAngle(0);
起始角度是饼图的整体起始角度,即第一个圆弧的起始角度。它通常表示为一个常量,但也可以表示为一个数据函数。当函数为 this
时,起始角度访问器会被调用一次,并传递与 饼图生成器 相同的参数和 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.
如果未指定角度,则返回当前起始角度访问器。
¥If angle is not specified, returns the current start angle accessor.
pie.startAngle() // () => 0
起始角度访问器默认为:
¥The start angle accessor defaults to:
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) {#pie_endAngle}
源代码 · 如果指定了角度,则将饼图的整体结束角度设置为指定的函数或数字并返回此饼图生成器。
¥Source · If angle is specified, sets the overall end angle of the pie to the specified function or number and returns this pie generator.
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.
如果未指定角度,则返回当前的结束角度访问器。
¥If angle is not specified, returns the current end angle accessor.
pie.endAngle() // () => Math.PI
结束角度访问器默认为:
¥The end angle accessor defaults to:
function endAngle() {
return 2 * Math.PI;
}
角度以弧度为单位,0 度位于 -y 轴(12 点钟方向),正角顺时针方向旋转。结束角度的值限制为 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) {#pie_padAngle}
示例 · 源代码 · 如果指定了 angle,则将填充角度设置为指定的函数或数字,并返回此饼图生成器。
¥Examples · Source · If angle is specified, sets the pad angle to the specified function or number and returns this pie generator.
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.
如果未指定角度,则返回当前的填充角度访问器。
¥If angle is not specified, returns the current pad angle accessor.
pie.padAngle() // () => 0.03
填充角度访问器默认为:
¥The pad angle accessor defaults to:
function padAngle() {
return 0;
}