堆栈

¥Stacks

示例 · 堆叠将长度转换为连续的位置间隔。例如，月销售额条形图可以按类别细分为多系列条形图，垂直堆叠条形并应用分类颜色编码。堆叠图可以同时显示总体值和每个类别的值；然而，由于只有堆栈的底层对齐，跨类别比较通常比较困难。因此，请谨慎选择 堆叠顺序，并考虑使用 streamgraph。（另请参阅 分组图表。）

¥Examples · Stacking converts lengths into contiguous position intervals. For example, a bar chart of monthly sales might be broken down into a multi-series bar chart by category, stacking bars vertically and applying a categorical color encoding. Stacked charts can show overall value and per-category value simultaneously; however, it is typically harder to compare across categories as only the bottom layer of the stack is aligned. So, chose the stack order carefully, and consider a streamgraph. (See also grouped charts.)

与 饼图生成器 类似，堆栈生成器不会直接生成形状。相反，它会计算位置，然后你可以将其传递给 区域生成器 或直接使用，例如用于定位条。

¥Like the pie generator, the stack generator does not produce a shape directly. Instead it computes positions which you can then pass to an area generator or use directly, say to position bars.

stack()

源代码 · 使用默认设置构造一个新的堆栈生成器。用法请参阅 stack。

¥Source · Constructs a new stack generator with the default settings. See stack for usage.

stack(data, ...arguments) {#_stack}

源代码 · 根据给定的数据数组生成一个堆栈，并返回一个表示每个系列的数组。任何其他参数都是任意的；它们会随 this 对象一起传递到访问器。

¥Source · Generates a stack for the given array of data and returns an array representing each series. Any additional arguments are arbitrary; they are propagated to accessors along with the this object.

例如，考虑这张整洁的月度水果销售表：

¥For example, consider this tidy table of monthly fruit sales:

date	fruit	sales
1/2015	apples	3840
1/2015	bananas	1920
1/2015	cherries	960
1/2015	durians	400
2/2015	apples	1600
2/2015	bananas	1440
2/2015	cherries	960
2/2015	durians	400
3/2015	apples	640
3/2015	bananas	960
3/2015	cherries	640
3/2015	durians	400
4/2015	apples	320
4/2015	bananas	480
4/2015	cherries	640
4/2015	durians	400

这可以在 JavaScript 中表示为对象数组，可能从 CSV 解析而来：

¥This could be represented in JavaScript as an array of objects, perhaps parsed from CSV:

const data = [
  {date: new Date("2015-01-01"), fruit: "apples", sales: 3840},
  {date: new Date("2015-01-01"), fruit: "bananas", sales: 1920},
  {date: new Date("2015-01-01"), fruit: "cherries", sales: 960},
  {date: new Date("2015-01-01"), fruit: "durians", sales: 400},
  {date: new Date("2015-02-01"), fruit: "apples", sales: 1600},
  {date: new Date("2015-02-01"), fruit: "bananas", sales: 1440},
  {date: new Date("2015-02-01"), fruit: "cherries", sales: 960},
  {date: new Date("2015-02-01"), fruit: "durians", sales: 400},
  {date: new Date("2015-03-01"), fruit: "apples", sales: 640},
  {date: new Date("2015-03-01"), fruit: "bananas", sales: 960},
  {date: new Date("2015-03-01"), fruit: "cherries", sales: 640},
  {date: new Date("2015-03-01"), fruit: "durians", sales: 400},
  {date: new Date("2015-04-01"), fruit: "apples", sales: 320},
  {date: new Date("2015-04-01"), fruit: "bananas", sales: 480},
  {date: new Date("2015-04-01"), fruit: "cherries", sales: 640},
  {date: new Date("2015-04-01"), fruit: "durians", sales: 400}
];

为了计算堆叠序列（每个水果对应一个序列或层；每个日期对应一个堆栈或列），我们可以先按日期对数据进行 index，然后按水果进行 index，计算数据集中不同的水果名称，最后获取每个日期和水果的销售额。

¥To compute the stacked series (a series, or layer, for each fruit; and a stack, or column, for each date), we can index the data by date and then fruit, compute the distinct fruit names across the data set, and lastly get the sales value for each date and fruit.

const series = d3.stack()
    .keys(d3.union(data.map(d => d.fruit))) // apples, bananas, cherries, …
    .value(([, group], key) => group.get(key).sales)
  (d3.index(data, d => d.date, d => d.fruit));

提示

更多信息请参阅 d3-array 的 union 和 index。

¥See union and index from d3-array.

生成的数组每个系列包含一个元素。每个系列每月都有一个点，每个点都有一个下限值和上限值，分别定义基线和顶线：

¥The resulting array has one element per series. Each series has one point per month, and each point has a lower and upper value defining the baseline and topline:

[
  [[   0, 3840], [   0, 1600], [   0,  640], [   0,  320]], // apples
  [[3840, 5760], [1600, 3040], [ 640, 1600], [ 320,  800]], // bananas
  [[5760, 6720], [3040, 4000], [1600, 2240], [ 800, 1440]], // cherries
  [[6720, 7120], [4000, 4400], [2240, 2640], [1440, 1840]]  // durians
]

每个系列通常传递给 区域生成器 来渲染面积图，或用于构建条形图的矩形。

¥Each series in then typically passed to an area generator to render an area chart, or used to construct rectangles for a bar chart.

svg.append("g")
  .selectAll("g")
  .data(series)
  .join("g")
    .attr("fill", d => color(d.key))
  .selectAll("rect")
  .data(D => D)
  .join("rect")
    .attr("x", d => x(d.data[0]))
    .attr("y", d => y(d[1]))
    .attr("height", d => y(d[0]) - y(d[1]))
    .attr("width", x.bandwidth());

序列由 键访问器 决定；返回数组中的每个系列 i 对应于第 i 个键。每个系列都是一个点数组，其中每个点 j 对应于输入数据中的第 j 个元素。最后，每个点都表示为一个数组 [y0, y1]，其中 y0 是下限值（基线），y1 是上限值（上限）；y0 和 y1 之间的差值对应于该点计算出的 value。每个系列的键为 series.key，index 为 series.index。每个点的输入数据元素以 point.data 的形式提供。

¥The series are determined by the keys accessor; each series i in the returned array corresponds to the ith key. Each series is an array of points, where each point j corresponds to the jth element in the input data. Lastly, each point is represented as an array [y0, y1] where y0 is the lower value (baseline) and y1 is the upper value (topline); the difference between y0 and y1 corresponds to the computed value for this point. The key for each series is available as series.key, and the index as series.index. The input data element for each point is available as point.data.

stack.keys(keys) {#stack_keys}

源代码 · 如果指定了 keys，则将 keys 访问器设置为指定的函数或数组并返回此堆栈生成器。

¥Source · If keys is specified, sets the keys accessor to the specified function or array and returns this stack generator.

const stack = d3.stack().keys(["apples", "bananas", "cherries", "durians"]);

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

¥If keys is not specified, returns the current keys accessor.

stack.keys() // () => ["apples", "bananas", "cherries", "durians"]

keys 访问器默认为空数组。系列（层）是每个键对应的 generated。键通常是字符串，但也可以是任意值；参见 InternMap。序列的键与每个数据点一起传递给 值访问器，以计算该点的值。

¥The keys accessor defaults to the empty array. A series (layer) is generated for each key. Keys are typically strings, but they may be arbitrary values; see InternMap. The series’ key is passed to the value accessor, along with each data point, to compute the point’s value.

stack.value(value) {#stack_value}

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

¥Source · If value is specified, sets the value accessor to the specified function or number and returns this stack generator.

const stack = d3.stack().value((d, key) => d[key]);

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

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

stack.value() // (d, key) => d[key]

值访问器默认为：

¥The value accessor defaults to:

function value(d, key) {
  return d[key];
}

CAUTION

默认值访问器假定输入数据是一个对象数组，该数组包含具有数值的命名属性。这是一种“宽泛”而非“整洁”的数据表示，不再推荐使用。请参阅 stack，了解使用 tidy 数据的示例。

¥The default value accessor assumes that the input data is an array of objects exposing named properties with numeric values. This is a “wide” rather than “tidy” representation of data and is no longer recommended. See stack for an example using tidy data.

stack.order(order) {#stack_order}

源代码 · 如果指定了 order，则将 order 访问器设置为指定的函数或数组，并返回此堆栈生成器。

¥Source · If order is specified, sets the order accessor to the specified function or array and returns this stack generator.

const stack = d3.stack().order(d3.stackOrderNone);

如果 order 是一个函数，则传递生成的序列数组，并必须返回一个表示堆栈顺序的数字索引数组。例如，要使用反向键顺序：

¥If order is a function, it is passed the generated series array and must return an array of numeric indexes representing the stack order. For example, to use reverse key order:

const stack = d3.stack().order(series => d3.range(series.length).reverse());

堆叠顺序在 offset 之前计算；因此，在计算顺序时，所有点的下限值为零。每个系列的索引属性在计算顺序后才会设置。

¥The stack order is computed prior to the offset; thus, the lower value for all points is zero at the time the order is computed. The index attribute for each series is also not set until after the order is computed.

如果 order 未指定，则返回当前顺序访问器。

¥If order is not specified, returns the current order accessor.

stack.order() // d3.stackOrderNone

order 访问器默认为 stackOrderNone；这使用 键访问器 给出的顺序。有关内置顺序，请参阅 堆叠顺序。

¥The order accessor defaults to stackOrderNone; this uses the order given by the key accessor. See stack orders for the built-in orders.

stack.offset(offset) {#stack_offset}

源代码 · 如果指定了 offset，则将偏移访问器设置为指定的函数，并返回此堆栈生成器。

¥Source · If offset is specified, sets the offset accessor to the specified function and returns this stack generator.

const stack = d3.stack().offset(d3.stackOffsetExpand);

偏移函数接收生成的序列数组和顺序索引数组；它负责更新序列数组中的下限值和上限值。有关参考实现，请参阅内置偏移量。

¥The offset function is passed the generated series array and the order index array; it is then responsible for updating the lower and upper values in the series array. See the built-in offsets for a reference implementation.

如果未指定 offset，则返回当前偏移量访问器。

¥If offset is not specified, returns the current offset acccesor.

stack.offset() // d3.stackOffsetExpand

偏移访问器默认为 stackOffsetNone；这使用零基线。有关内置偏移量，请参阅 堆叠偏移。

¥The offset accessor defaults to stackOffsetNone; this uses a zero baseline. See stack offsets for the built-in offsets.

堆栈顺序

¥Stack orders

堆叠顺序通常不直接使用，而是传递给 stack.order。

¥Stack orders are typically not used directly, but are instead passed to stack.order.

stackOrderAppearance(series)

const stack = d3.stack().order(d3.stackOrderAppearance);

源代码 · 返回一个序列顺序，其中最早的序列（根据最大值）位于底部。

¥Source · Returns a series order such that the earliest series (according to the maximum value) is at the bottom.

stackOrderAscending(series)

const stack = d3.stack().order(d3.stackOrderAscending);

源代码 · 返回一个序列顺序，其中最小的序列（根据值的总和）位于底部。

¥Source · Returns a series order such that the smallest series (according to the sum of values) is at the bottom.

stackOrderDescending(series)

const stack = d3.stack().order(d3.stackOrderDescending);

源代码 · 返回一个序列顺序，其中最大的序列（根据值的总和）位于底部。

¥Source · Returns a series order such that the largest series (according to the sum of values) is at the bottom.

stackOrderInsideOut(series)

const stack = d3.stack().order(d3.stackOrderInsideOut);

源代码 · 返回一个序列顺序，其中最早的序列（根据最大值）位于内部，较晚的序列位于外部。建议将此顺序与 摆动偏移 结合用于流图。更多信息请参阅 Byron 和 Wattenberg 编写的 堆叠图 - 几何与美学。

¥Source · Returns a series order such that the earliest series (according to the maximum value) are on the inside and the later series are on the outside. This order is recommended for streamgraphs in conjunction with the wiggle offset. See Stacked Graphs — Geometry & Aesthetics by Byron & Wattenberg for more information.

stackOrderNone(series)

const stack = d3.stack().order(d3.stackOrderNone);

源代码 · 返回给定的序列顺序 [0, 1, … n - 1] 其中 n 是序列中元素的数量。因此，堆叠顺序由 键访问器 给出。

¥Source · Returns the given series order [0, 1, … n - 1] where n is the number of elements in series. Thus, the stack order is given by the key accessor.

stackOrderReverse(series)

const stack = d3.stack().order(d3.stackOrderReverse);

源代码 · 返回给定序列顺序的逆序 [n - 1, n - 2, … 0] 其中 n 是序列中元素的数量。因此，堆叠顺序由 键访问器 的反转给出。

¥Source · Returns the reverse of the given series order [n - 1, n - 2, … 0] where n is the number of elements in series. Thus, the stack order is given by the reverse of the key accessor.

堆栈偏移

¥Stack offsets

堆叠偏移通常不直接使用，而是传递给 stack.offset。

¥Stack offsets are typically not used directly, but are instead passed to stack.offset.

stackOffsetExpand(series, order)

const stack = d3.stack().offset(d3.stackOffsetExpand);

源代码 · 应用零基线并规范化每个点的值，使顶线始终为 1。

¥Source · Applies a zero baseline and normalizes the values for each point such that the topline is always one.

stackOffsetDiverging(series, order)

const stack = d3.stack().offset(d3.stackOffsetDiverging);

源代码 · 正值堆叠在零上方，负值堆叠在 零下堆叠 处，零值堆叠在零处。

¥Source · Positive values are stacked above zero, negative values are stacked below zero, and zero values are stacked at zero.

stackOffsetNone(series, order)

const stack = d3.stack().offset(d3.stackOffsetNone);

源代码 · 应用零基线。

¥Source · Applies a zero baseline.

stackOffsetSilhouette(series, order)

const stack = d3.stack().offset(d3.stackOffsetSilhouette);

源代码 · 将基线向下移动，使流图的中心始终位于零点。

¥Source · Shifts the baseline down such that the center of the streamgraph is always at zero.

stackOffsetWiggle(series, order)

const stack = d3.stack().offset(d3.stackOffsetWiggle);

源代码 · 移动基线以最小化层的加权摆动。建议将此偏移量与 由内而外的顺序 结合使用，用于流图。更多信息请参阅 Bryon 和 Wattenberg 编写的 堆叠图 - 几何与美学。

¥Source · Shifts the baseline so as to minimize the weighted wiggle of layers. This offset is recommended for streamgraphs in conjunction with the inside-out order. See Stacked Graphs — Geometry & Aesthetics by Bryon & Wattenberg for more information.