区域

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

area(x, y0, y1)

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

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

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

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

area(data)

源代码 · 为给定的data 数组生成一个区域。

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

如果区域生成器具有 上下文，则区域将被渲染到此上下文中，作为一系列 路径方法 调用，此函数返回 void。否则，将返回一个 路径数据 字符串。

警告

根据此区域生成器关联的 曲线，给定的输入data 可能需要在传递给区域生成器之前按x 值排序。

area.x(x)

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

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

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

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

area.x0(x)

提示

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

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

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

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

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

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

x0 访问器的默认值为

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

默认的 x0 访问器假设输入数据是数字的二元数组 [[x0, y0], [x1, y1], …]。如果您的数据采用不同的格式，或者您希望在渲染之前转换数据，那么您应该指定一个自定义访问器，如上所示。

area.x1(x)

提示

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

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

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

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

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

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

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

area.y(y)

提示

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

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

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

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

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

area.y0(y)

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

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

当生成区域时，y0 访问器将为输入数据数组中的每个已定义 元素调用，将元素d、索引i 和数组data 作为三个参数传递。对于具有恒定基线的水平方向的区域（即，未堆叠的区域，而不是丝带或条带），y0 通常设置为 y 刻度对零的输出。

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

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

y0 访问器的默认值为

function y() {
  return 0;
}

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

area.y1(y)

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

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

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

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

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

y1 访问器的默认值为

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

默认的 y1 访问器假设输入数据是数字的二元数组 [[x0, y0], [x1, y1], …]。如果您的数据采用不同的格式，或者您希望在渲染之前转换数据，那么您应该指定一个自定义访问器，如上所示。也允许使用 null 访问器，表示应将先前计算的 y0 值重复用于 y1 值；这可用于垂直方向的区域，例如当时间向下↓而不是向右→时。

area.defined(defined)

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

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

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

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

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

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

function defined() {
  return true;
}

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

area.curve(curve)

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

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

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

area.curve() // d3.curveStep

area.context(context)

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

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

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

area.context() // context

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

area.digits(digits)

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

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

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

area.digits() // 3

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

area.lineX0()

它是area.lineY0的别名。

area.lineY0()

源代码 · 返回一个新的线生成器，它具有此区域生成器的当前定义访问器、曲线和上下文。线的x访问器是此区域的x0访问器，线的y访问器是此区域的y0访问器。

area.lineX1()

源代码 · 返回一个新的线生成器，它具有此区域生成器的当前定义访问器、曲线和上下文。线的x访问器是此区域的x1访问器，线的y访问器是此区域的y0访问器。

area.lineY1()

源代码 · 返回一个新的线生成器，它具有此区域生成器的当前定义访问器、曲线和上下文。线的x访问器是此区域的x0访问器，线的y访问器是此区域的y1访问器。