by Observable

外觀

線條 ​

範例 · 線條產生器會產生 樣條線 或 折線，就像線條圖一樣。線條也會出現在許多其他視覺化類型中，例如 階層邊緣綑綁 中的連結。另請參閱 徑向線條。

line(x, y) ​

原始碼 · 使用給定的 x 和 y 存取器建構新的線條產生器。

js
const line = d3.line((d) => x(d.Date), (d) => y(d.Close));

如果未指定 x 或 y，將使用各自的預設值。上述內容可以更明確地表示為

js
const line = d3.line()
    .x((d) => x(d.Date))
    .y((d) => y(d.Close));

line(data) ​

原始碼 · 為給定的 data 陣列產生一條線條。

js
svg.append("path").attr("d", line(data)).attr("stroke", "currentColor");

如果線條產生器具有 context，則會將線條呈現到此 context 中，作為一系列 路徑方法 呼叫，且此函式會傳回 void。否則，會傳回 路徑資料 字串。

注意事項

根據此線條產生器關聯的 曲線，可能需要在將給定的輸入 *資料* 傳遞到線條產生器之前，依據 *x* 值對其進行排序。

line.x(x) ​

來源 · 如果指定 x，則會將 x 存取器設定為指定的函式或數字，並傳回此線條產生器。

js
const line = d3.line().x((d) => x(d.Date));

如果未指定 x，則會傳回目前的 x 存取器。

js
line.x() // (d) => x(d.Date)

x 存取器的預設值為

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

當產生一條線條時，會對輸入資料陣列中每個 已定義 的元素呼叫 x 存取器，並將元素 d、索引 i 和陣列 data 作為三個引數傳遞給它。

預設 x 存取器假設輸入資料是數字的二元陣列。如果資料格式不同，或者您希望在呈現之前轉換資料，則應指定自訂存取器。

line.y(y) ​

來源 · 如果指定 y，則會將 y 存取器設定為指定的函式或數字，並傳回此線條產生器。

js
const line = d3.line().y((d) => y(d.Close));

當產生一條線條時，會對輸入資料陣列中每個 已定義 的元素呼叫 y 存取器，並將元素 d、索引 i 和陣列 data 作為三個引數傳遞給它。

如果未指定 y，則會傳回目前的 y 存取器。

js
line.y() // (d) => y(d.Close)

y 存取器的預設值為

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

預設 y 存取器假設輸入資料是數字的二元陣列。請參閱 line.x 以取得更多資訊。

線條.defined(已定義) ​

範例 · 原始碼 · 如果指定了 已定義，則將已定義的存取器設定為指定的函式或布林值，並傳回此線條產生器。

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

當產生一條線條時，將針對輸入資料陣列中的每個元素呼叫已定義的存取器，並將元素 d、索引 i 和陣列 data 作為三個引數傳遞給它。如果給定的元素已定義（即，如果已定義的存取器為此元素傳回真值），則會進一步評估 x 和 y 存取器，並將點新增至目前的線條區段。否則，將略過該元素，結束目前的線條區段，並為下一個已定義的點產生一個新的線條區段。

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

js
line.defined() // (d) => !isNaN(d.Close)

已定義的存取器預設為常數 true，並假設輸入資料總是已定義

js
function defined() {
  return true;
}

請注意，如果一個線條區段僅包含一個點，則它可能看不見，除非使用圓形或正方形 線條端點 進行渲染。此外，某些曲線（例如 curveCardinalOpen）僅在包含多個點時才會渲染可見的區段。

線條.curve(曲線) ​

原始碼 · 如果指定了 曲線，則設定 曲線工廠 並傳回此線條產生器。

js
const line = d3.line().curve(d3.curveStep);

如果未指定 曲線，則傳回目前的曲線工廠，預設為 curveLinear。

js
line.curve() // d3.curveStep

線條.context(context) ​

原始碼 · 如果指定了 context，則設定 context 並傳回此線條產生器。

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

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

js
line.context() // context

context 預設為 null。如果 context 不為 null，則會將 產生的線條 渲染到此 context 中，作為一系列 路徑方法 呼叫。否則，會傳回代表已產生線條的 路徑資料 字串。

線段.digits(位數) ​

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

js
const line = d3.line().digits(3);

如果沒有指定 位數，則會傳回目前最大小數位數，預設為 3。

js
line.digits() // 3

這個選項僅適用於相關的 內容 為 null 的情況，例如當這個線段產生器用於產生 路徑資料 時。