曲線
曲線將 線條 或 區域 的離散(點狀)表示轉換為連續形狀:曲線指定如何在二維 [x, y] 點之間插值。
曲線通常不會直接建構或使用。相反地,內建曲線之一會傳遞給 line.curve 或 area.curve。
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.areaStart 和 curve.areaEnd;它旨在與 d3.line 搭配使用,而不是 d3.area。
curveBundle.beta(beta)
原始碼 · 傳回一個具有指定 beta 的捆綁曲線,beta 的範圍為 [0, 1],代表捆綁強度。如果 beta 等於零,則會產生第一點和最後一點之間的直線;如果 beta 等於一,則會產生標準的 基礎 樣條曲線。例如
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 樣條曲線。例如
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,會產生一個 向心樣條曲線。建議使用向心樣條曲線來避免自相交錯和過衝。例如
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.curve 和 area.curve。但是,如果你沒有內建曲線滿足你的需求,你可以使用以下介面定義你自己的曲線實作;請參閱 curveLinear 來源 以取得實作範例。你也可以將這個低階介面與內建曲線類型一起使用,作為線條和區域產生器的替代方案。
curve.areaStart()
表示新區域區段的開始。每個區域區段恰好包含兩個 線段:頂線,接著是基線,基線點以相反順序排列。
curve.areaEnd()
表示當前區域區段的結束。
curve.lineStart()
表示新線段的開始。零個或多個 點 將會隨後出現。
curve.lineEnd()
表示當前線段的結束。
curve.point(x, y)
表示當前線段中一個新點,具有給定的 x 和 y 值。