区域

🌐 Areas

示例 · 区域生成器生成由 顶部线 和 基线 定义的区域，如面积图所示。通常，这两条线共享相同的 x 值 (x0 = x1)，仅在 y 值 (y0 和 y1) 上有所不同；最常见的是，y0 被定义为表示零的常数（y 轴刻度的零输出）。顶部线 由 x1 和 y1 定义，并先渲染；基线 由 x0 和 y0 定义，并按相反顺序渲染第二个点。使用 curveLinear 曲线 时，这会生成顺时针方向的多边形。另请参见 径向区域。

区域(x, y0, y1)

🌐 area(x, y0, y1)

来源 · 使用给定的 x、y0 和 y1 访问器或数字构造一个新的区域生成器。

const area = d3.area((d) => x(d.Date), y(0), (d) => y(d.Close));

如果未指定 x、y0 或 y1，将使用各自的默认值。上述内容可以更明确地表达为：

🌐 If x, y0 or y1 are not specified, the respective defaults will be used. The above can be expressed more explicitly as:

const area = d3.area()
    .x((d) => x(d.Date))
    .y0(y(0))
    .y1((d) => y(d.Close));

区域(数据)

🌐 area(data)

Source · 为给定的 data 数组生成一个区域。

svg.append("path").attr("d", area(data));

如果区域生成器有一个上下文，那么该区域将作为一系列path 方法调用渲染到此上下文，并且此函数返回空值。否则，将返回一个path 数据字符串。

🌐 If the area generator has a context, then the area is rendered to this context as a sequence of path method calls and this function returns void. Otherwise, a path data string is returned.

小心

根据该区域生成器相关的曲线，在将给定输入数据传递给区域生成器之前，可能需要按x值对其进行排序。

area.x(x)

来源 · 如果指定了 x，则将 x0 设置为 x，将 x1 设置为 null，并返回此区域生成器。

const area = d3.area().x((d) => x(d.Date));

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

🌐 If x is not specified, returns the current x0 accessor.

area.x() // (d) => x(d.Date)

area.x0(x)

TIP

此方法适用于垂直方向的区域，例如时间向下↓而不是向右→；对于更常见的水平方向区域，请改用 area.x。

来源 · 如果指定了 x，则将 x0 访问器设置为指定的函数或数字，并返回此区域生成器。

const area = d3.area().x0(x(0));

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

🌐 When an area is generated, the x0 accessor will be invoked for each defined element in the input data array, being passed the element d, the index i, and the array data as three arguments.

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

🌐 If x is not specified, returns the current x0 accessor.

area.x0() // () => 20

x0 访问器默认为：

🌐 The x0 accessor defaults to:

function x(d) {
  return d[0];
}

默认的 x0 访问器假设输入数据是由两个数字元素构成的数组 [[x0, y0], [x1, y1], …]。如果你的数据格式不同，或者你希望在渲染前对数据进行转换，那么你应该像上面示例中那样指定自定义访问器。

🌐 The default x0 accessor assumes that the input data are two-element arrays of numbers [[x0, y0], [x1, y1], …]. If your data are in a different format, or if you wish to transform the data before rendering, then you should specify a custom accessor as shown above.

area.x1(x)

TIP

此方法适用于垂直方向的区域，例如时间向下↓而不是向右→；对于更常见的水平方向区域，请改用 area.x。

来源 · 如果指定了 x，则将 x1 访问器设置为指定的函数或数字，并返回此区域生成器。

const area = d3.area().x1((d) => x(d.Close));

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

🌐 When an area is generated, the x1 accessor will be invoked for each defined element in the input data array, being passed the element d, the index i, and the array data as three arguments.

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

🌐 If x is not specified, returns the current x1 accessor.

area.x1() // (d) => x(d.Close)

x1 访问器默认值为 null，表示应将先前计算的 x0 值重新用于 x1 值；此默认值适用于水平方向区域。

🌐 The x1 accessor defaults to null, indicating that the previously-computed x0 value should be reused for the x1 value; this default is intended for horizontally-oriented areas.

area.y(y)

TIP

此方法适用于纵向区域，例如时间向下↓而不是向右→；对于更常见的横向区域，请使用area.y0 和 area.y1 替代。

来源 · 如果指定了 y，则将 y0 设置为 y，将 y1 设置为 null，并返回此区域生成器。

const area = d3.area().y((d) => y(d.Date));

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

🌐 If y is not specified, returns the current y0 accessor.

area.y() // (d) => y(d.Date)

area.y0(y)

来源 · 如果指定了 y，则将 y0 访问器设置为指定的函数或数字，并返回此区域生成器。

const area = d3.area().y0(y(0));

当一个区域被生成时，y0 访问器将会对输入数据数组中的每个定义元素调用，并传入元素 d、索引 i 和数组 data 作为三个参数。对于具有恒定基线的水平区域（即非堆叠的区域，且不是缎带或带状区域），y0 通常设置为 y 规模在零处的输出。

🌐 When an area is generated, the y0 accessor will be invoked for each defined element in the input data array, being passed the element d, the index i, and the array data as three arguments. For a horizontally-oriented area with a constant baseline (i.e., an area that is not stacked, and not a ribbon or band), y0 is typically set to the output of the y scale for zero.

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

🌐 If y is not specified, returns the current y0 accessor.

area.y0() // () => 360

y0 访问器默认为：

🌐 The y0 accessor defaults to:

function y() {
  return 0;
}

请注意，在默认的 SVG 坐标系中，默认零代表图表的顶部而不是底部，从而产生翻转（或“悬挂”）区域。

🌐 In the default SVG coordinate system, note that the default zero represents the top of the chart rather than the bottom, producing a flipped (or “hanging”) area.

area.y1(y)

来源 · 如果指定了 y，则将 y1 访问器设置为指定的函数或数字，并返回此区域生成器。

const area = d3.area().y1((d) => y(d.Close));

当一个区域被生成时，y1 访问器将会对输入数据数组中的每个定义元素调用，传递该元素 d、索引 i 和数组 data 作为三个参数。

🌐 When an area is generated, the y1 accessor will be invoked for each defined element in the input data array, being passed the element d, the index i, and the array data as three arguments.

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

🌐 If y is not specified, returns the current y1 accessor.

area.y1() // (d) => y(d.Close)

y1 访问器默认为：

🌐 The y1 accessor defaults to:

function y(d) {
  return d[1];
}

默认的 y1 访问器假设输入数据是由两个数字元素组成的数组 [[x0, y0], [x1, y1], …]。如果你的数据格式不同，或希望在渲染之前对数据进行转换，则应如上所示指定一个自定义访问器。也允许使用 null 访问器，这表示应重复使用之前计算的 y0 值作为 y1 值；这可以用于垂直方向的区域，比如时间向下↓而不是向右→时。

🌐 The default y1 accessor assumes that the input data are two-element arrays of numbers [[x0, y0], [x1, y1], …]. If your data are in a different format, or if you wish to transform the data before rendering, then you should specify a custom accessor as shown above. A null accessor is also allowed, indicating that the previously-computed y0 value should be reused for the y1 value; this can be used for a vertically-oriented area, as when time goes down↓ instead of right→.

area.defined(defined)

示例 · 来源 · 如果指定了 defined，则将定义的访问器设置为指定的函数或布尔值，并返回此区域生成器。

const area = d3.area().defined((d) => !isNaN(d.Close));

当一个区域被生成时，对于输入数据数组中的每个元素，定义的访问器都会被调用，传入元素 d、索引 i 和数组 data 作为三个参数。如果给定的元素已定义（即，如果定义的访问器为该元素返回一个真值），则随后会评估 x0、x1、y0 和 y1 访问器，并将该点添加到当前区域段。否则，该元素将被跳过，当前区域段将结束，并为下一个定义的点生成一个新的区域段。因此，生成的区域可能包含若干个分离的段。

🌐 When an area is generated, the defined 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 the given element is defined (i.e., if the defined accessor returns a truthy value for this element), the x0, x1, y0 and y1 accessors will subsequently be evaluated and the point will be added to the current area segment. Otherwise, the element will be skipped, the current area segment will be ended, and a new area segment will be generated for the next defined point. As a result, the generated area may have several discrete segments.

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

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

area.defined() // (d) => !isNaN(d.Close)

定义的访问器默认为常量 true，并假定输入数据始终已定义：

🌐 The defined accessor defaults to the constant true, and assumes that the input data is always defined:

function defined() {
  return true;
}

请注意，如果一个区域段仅由一个点组成，除非使用圆形或方形的线帽渲染，否则它可能看不见。此外，某些曲线，如curveCardinalOpen，只有在包含多个点时才会渲染出可见的段落。

🌐 Note that if an area segment consists of only a single point, it may appear invisible unless rendered with rounded or square line caps. In addition, some curves such as curveCardinalOpen only render a visible segment if it contains multiple points.

area.curve(curve)

来源 · 如果指定了 curve，则设置 曲线工厂 并返回此区域生成器。

const area = d3.area().curve(d3.curveStep);

如果未指定 curve，则返回当前曲线工厂，默认值为 curveLinear。

🌐 If curve is not specified, returns the current curve factory, which defaults to curveLinear.

area.curve() // d3.curveStep

area.context(context)

来源 · 如果指定了 context，则设置该上下文并返回此区域生成器。

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

如果未指定 context，则返回当前上下文。

🌐 If context is not specified, returns the current context.

area.context() // context

上下文默认为 null。如果上下文不为 null，则将 生成的区域 作为一系列 路径方法 调用渲染到此上下文中。否则，将返回表示生成区域的 路径数据 字符串。

🌐 The context defaults to null. If the context is not null, then the generated area is rendered to this context as a sequence of path method calls. Otherwise, a path data string representing the generated area is returned.

area.digits(digits)

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

const area = d3.area().digits(3);

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

🌐 If digits is not specified, returns the current maximum fraction digits, which defaults to 3.

area.digits() // 3

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

🌐 This option only applies when the associated context is null, as when this area generator is used to produce path data.

area.lineX0()

area.lineY0 的别名。

🌐 An alias for area.lineY0.

area.lineY0()

来源 · 返回一个新的 线生成器，它具有该区域生成器当前的 定义取值器、曲线 和 上下文。线的 x-取值器 是该区域的 x0-取值器，线的 y-取值器 是该区域的 y0-取值器。

区域.lineX1()

🌐 area.lineX1()

来源 · 返回一个新的 线生成器，它具有该区域生成器当前的 定义取值器、曲线 和 上下文。线的 x-取值器 是该区域的 x1-取值器，线的 y-取值器 是该区域的 y0-取值器。

区域.lineY1()

🌐 area.lineY1()

来源 · 返回一个新的 线生成器，它具有该区域生成器当前的 定义取值器、曲线 和 上下文。线的 x-取值器 是该区域的 x0-取值器，线的 y-取值器 是该区域的 y1-取值器。