跳至內容

曲線

曲線將 線條區域 的離散(點狀)表示轉換為連續形狀:曲線指定如何在二維 [x, y] 點之間插值。

曲線通常不會直接建構或使用。相反地,內建曲線之一會傳遞給 line.curvearea.curve

js
const line = d3.line()
    .x((d) => x(d.date))
    .y((d) => y(d.value))
    .curve(d3.curveCatmullRom.alpha(0.5));

如果您需要,可以實作 自訂曲線。如需直接使用曲線的範例,請參閱 Context to Curve

curveBasis(context)

來源 · 使用指定的控制點產生三次 基礎樣條。第一個和最後一個點會三倍化,以便樣條從第一個點開始,在最後一個點結束,並且與第一個和第二個點之間的線條相切,以及倒數第二個和最後一個點之間的線條相切。

curveBasisClosed(context)

原始碼 · 使用指定的控制點產生封閉三次 B 樣條。當線段結束時,會重複前三個控制點,產生具有 C2 連續性的封閉迴圈。

curveBasisOpen(context)

原始碼 · 使用指定的控制點產生三次 B 樣條。與 basis 不同的是,不會重複第一個和最後一個點,因此曲線通常不會與這些點相交。

curveBumpX(context)

原始碼 · 在每對點之間產生貝茲曲線,每個點都有水平切線。

curveBumpY(context)

原始碼 · 在每對點之間產生貝茲曲線,每個點都有垂直切線。

curveBundle(context)

原始碼 · 使用指定的控制點產生拉直的三次 B 樣條,並根據曲線的 beta(預設為 0.85)拉直樣條。此曲線通常用於 階層邊緣綑綁 中,以消除連接的歧義,正如 Danny Holten階層邊緣綑綁:階層資料中鄰接關係的視覺化 中所提出的。此曲線未實作 curve.areaStartcurve.areaEnd;它旨在與 d3.line 搭配使用,而不是 d3.area

curveBundle.beta(beta)

原始碼 · 傳回一個具有指定 beta 的捆綁曲線,beta 的範圍為 [0, 1],代表捆綁強度。如果 beta 等於零,則會產生第一點和最後一點之間的直線;如果 beta 等於一,則會產生標準的 基礎 樣條曲線。例如

js
const line = d3.line().curve(d3.curveBundle.beta(0.5));

curveCardinal(context)

原始碼 · 使用指定的控制點產生三次 基數樣條曲線,第一段和最後一段使用單邊差分。預設的 張力 為 0。

curveCardinalClosed(context)

原始碼 · 使用指定的控制點產生閉合的三次 基數樣條曲線。當線段結束時,會重複前三個控制點,產生閉合迴圈。預設的 張力 為 0。

curveCardinalOpen(context)

原始碼 · 使用指定的控制點產生三次 基數樣條曲線。與 curveCardinal 不同,第一段和最後一段不使用單邊差分,因此曲線從第二點開始,在倒數第二點結束。預設的 張力 為 0。

curveCardinal.tension(tension)

原始碼 · 傳回一個基數曲線,其指定的張力範圍為 [0, 1]。張力決定切線的長度:張力為 1 會產生所有零切線,等同於 curveLinear張力為 0 會產生一個均勻的 Catmull–Rom 樣條曲線。例如

js
const line = d3.line().curve(d3.curveCardinal.tension(0.5));

curveCatmullRom(context)

原始碼 · 使用指定的控制點和參數 alpha 產生一個三次 Catmull–Rom 樣條曲線,預設為 0.5,正如 Yuksel 等人在 Catmull–Rom 曲線的參數化 中所建議,並對第一個和最後一個部分使用單邊差分。

curveCatmullRomClosed(context)

原始碼 · 使用指定的控制點和參數 alpha 產生一個封閉的三次 Catmull–Rom 樣條曲線,預設為 0.5,正如 Yuksel 等人所建議。當線段結束時,前三個控制點會重複,產生一個封閉迴圈。

curveCatmullRomOpen(context)

原始碼 · 使用指定的控制點和參數 alpha 產生一個三次 Catmull–Rom 樣條曲線,預設為 0.5,正如 Yuksel 等人所建議。與 curveCatmullRom 不同,第一個和最後一個部分不使用單邊差分,因此曲線從第二個點開始,並在倒數第二個點結束。

curveCatmullRom.alpha(alpha)

原始碼 · 傳回一個三次 Catmull–Rom 曲線,其指定的alpha 範圍為 [0, 1]。如果alpha 為零,會產生一個均勻的樣條曲線,等同於張力為零的 curveCardinal;如果alpha 為一,會產生一個弦線樣條曲線;如果alpha 為 0.5,會產生一個 向心樣條曲線。建議使用向心樣條曲線來避免自相交錯和過衝。例如

js
const line = d3.line().curve(d3.curveCatmullRom.alpha(0.5));

curveLinear(context)

原始碼 · 透過指定的點產生折線。

curveLinearClosed(context)

原始碼 · 透過指定的點產生閉合折線,當線段結束時重複第一個點。

curveMonotoneX(context)

原始碼 · 產生三次樣條曲線,假設 x 單調,在 y保持單調性,如同 Steffen 在 一維單調插值的簡單方法 中所提出的:「平滑曲線具有一階連續導數,通過任何給定的資料點集,且沒有雜散振盪。局部極值只能出現在資料給定的網格點,而不會出現在兩個相鄰網格點之間。」

curveMonotoneY(context)

原始碼 · 產生三次樣條曲線,假設 y 單調,在 x保持單調性,如同 Steffen 在 一維單調插值的簡單方法 中所提出的:「平滑曲線具有一階連續導數,通過任何給定的資料點集,且沒有雜散振盪。局部極值只能出現在資料給定的網格點,而不會出現在兩個相鄰網格點之間。」

curveNatural(context)

原始碼 · 產生自然 三次樣條曲線,其端點處的二次導數設定為零。

curveStep(context)

來源 · 產生一個分段常數函數(一個 階躍函數),由交替的水平和垂直線組成。y 值在每對相鄰 x 值的中點改變。

curveStepAfter(context)

來源 · 產生一個分段常數函數(一個 階躍函數),由交替的水平和垂直線組成。y 值在 x 值之後改變。

curveStepBefore(context)

來源 · 產生一個分段常數函數(一個 階躍函數),由交替的水平和垂直線組成。y 值在 x 值之前改變。

自訂曲線

曲線通常不會直接使用,而是傳遞給 line.curvearea.curve。但是,如果你沒有內建曲線滿足你的需求,你可以使用以下介面定義你自己的曲線實作;請參閱 curveLinear 來源 以取得實作範例。你也可以將這個低階介面與內建曲線類型一起使用,作為線條和區域產生器的替代方案。

curve.areaStart()

表示新區域區段的開始。每個區域區段恰好包含兩個 線段:頂線,接著是基線,基線點以相反順序排列。

curve.areaEnd()

表示當前區域區段的結束。

curve.lineStart()

表示新線段的開始。零個或多個 將會隨後出現。

curve.lineEnd()

表示當前線段的結束。

curve.point(x, y)

表示當前線段中一個新點,具有給定的 xy 值。