區域

範例 · 區域產生器會產生一個由頂線和基線定義的區域，就像在區域圖中一樣。通常，兩條線共用相同的 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));

如果面積產生器有 context，則會將面積以一系列 路徑方法 呼叫的形式呈現在此 context 中，且此函式會傳回 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，則將已定義的存取器設定為指定的函式或布林值，並傳回此面積產生器。

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

當產生一個面積時，將為輸入資料陣列中的每個元素呼叫已定義的存取器，並將元素 d、索引 i 和陣列 data 作為三個引數傳遞。如果給定的元素已定義（即，如果已定義的存取器為此元素傳回真值），則 x0、x1、y0 和 y1 存取器將隨後進行評估，並且該點將被新增至目前的面積區段。否則，將略過該元素，結束目前的面積區段，並為下一個已定義的點產生一個新的面積區段。因此，產生的面積可能有多個離散區段。

如果未指定 defined，則傳回目前已定義的存取器。

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

已定義的存取器預設為常數 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，則設定 context 並傳回這個面積產生器。

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

如果未指定 context，則傳回目前的 context。

area.context() // context

context 預設為 null。如果 context 不為 null，則會將 產生的面積 渲染到這個 context 中，作為一系列 路徑方法 呼叫。否則，會傳回一個表示產生面積的 路徑資料 字串。

area.digits(digits)

原始碼 · 如果指定了 digits，則設定小數點後面的最大位數並傳回這個面積產生器。

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

如果未指定 digits，則傳回目前的最大小數位數，預設為 3。

area.digits() // 3

這個選項僅適用於關聯的 context 為 null 時，例如當這個面積產生器用於產生 路徑資料 時。

area.lineX0()

area.lineY0 的別名。

area.lineY0()

原始碼 · 傳回一個新的 線條產生器，它具有這個面積產生器目前的 定義存取器、曲線 和 context。線條的 x 存取器 是這個面積的 x0 存取器，而線條的 y 存取器 是這個面積的 y0 存取器。

area.lineX1()

原始碼 · 傳回一個新的 線條產生器，它具有此區域產生器的目前 已定義存取器、曲線 和 內容。線條的 x 存取器 是此區域的 x1 存取器，而線條的 y 存取器 是此區域的 y0 存取器。

area.lineY1()

原始碼 · 傳回一個新的 線條產生器，它具有此區域產生器的目前 已定義存取器、曲線 和 內容。線條的 x 存取器 是此區域的 x0 存取器，而線條的 y 存取器 是此區域的 y1 存取器。