作成者Observable曲線
曲線は、線またはエリアの離散的な（点ごとの）表現を連続的な形状に変換します。曲線は、2次元[ *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)
ソース · 指定された制御点を使用して3次基底スプラインを生成します。最初の点と最後の点は3回繰り返されるため、スプラインは最初の点で始まり最後の点で終わり、最初の点と2番目の点の間の線、および最後から2番目の点と最後の点の間の線に接線となります。
curveBasisClosed(context)
ソース · 指定された制御点を使用して閉じた3次基底スプラインを生成します。線分が終了すると、最初の3つの制御点が繰り返され、C2連続性を持つ閉ループが生成されます。
curveBasisOpen(context)
ソース · 指定された制御点を使用して3次基底スプラインを生成します。basisとは異なり、最初と最後の点は繰り返されず、そのため曲線は通常これらの点と交差しません。
curveBumpX(context)
ソース · 各点のペア間にベジエ曲線を生成し、各点で水平な接線を持ちます。
curveBumpY(context)
ソース · 各点のペア間にベジエ曲線を生成し、各点で垂直な接線を持ちます。
curveBundle(context)
ソース · 指定された制御点を使用して、曲線のbeta（デフォルトは0.85）に従ってまっすぐにされた3次基底スプラインを生成します。この曲線は通常、階層的エッジバンドルで使用され、Danny HoltenがHierarchical Edge Bundles: Visualization of Adjacency Relations in Hierarchical Dataで提案したように、接続のあいまいさを解消します。この曲線はcurve.areaStartとcurve.areaEndを実装しません。d3.areaではなくd3.lineで使用することを意図しています。
curveBundle.beta(beta)
ソース · バンドの強度を表す、[0, 1]の範囲の指定されたbetaを持つバンドルカーブを返します。betaがゼロの場合、最初と最後の点間の直線が生成されます。betaが1の場合、標準のbasisスプラインが生成されます。例:
const line = d3.line().curve(d3.curveBundle.beta(0.5));curveCardinal(context)
ソース · 指定された制御点を使用して、3次カーディナルスプラインを生成し、最初と最後の部分には片側差分を使用します。デフォルトの張力は0です。
curveCardinalClosed(context)
ソース · 指定された制御点を使用して閉じた3次カーディナルスプラインを生成します。線分が終了すると、最初の3つの制御点が繰り返され、閉ループが生成されます。デフォルトの張力は0です。
curveCardinalOpen(context)
ソース · 指定された制御点を使用して3次カーディナルスプラインを生成します。curveCardinalとは異なり、最初と最後の部分には片側差分は使用されず、そのため曲線は2番目の点で始まり、最後から2番目の点で終わります。デフォルトの張力は0です。
curveCardinal.tension(tension)
ソース · [0, 1]の範囲の指定されたtensionを持つカーディナルカーブを返します。tensionは接線の長さを決定します。tensionが1の場合、すべての接線がゼロになり、curveLinearと同等になります。tensionがゼロの場合、均一なCatmull–Romスプラインが生成されます。例:
const line = d3.line().curve(d3.curveCardinal.tension(0.5));curveCatmullRom(context)
ソース · 指定された制御点とパラメータalpha（デフォルトは0.5）を使用して、YukselらがOn the Parameterization of Catmull–Rom Curvesで提案したように、3次Catmull–Romスプラインを生成し、最初と最後の部分には片側差分を使用します。
curveCatmullRomClosed(context)
ソース · 指定された制御点とパラメータalpha（デフォルトは0.5）を使用して、Yukselらが提案したように、閉じた3次Catmull–Romスプラインを生成します。線分が終了すると、最初の3つの制御点が繰り返され、閉ループが生成されます。
curveCatmullRomOpen(context)
ソース · 指定された制御点とパラメータalpha（デフォルトは0.5）を使用して、Yukselらが提案したように、3次Catmull–Romスプラインを生成します。curveCatmullRomとは異なり、最初と最後の部分には片側差分は使用されず、そのため曲線は2番目の点で始まり、最後から2番目の点で終わります。
curveCatmullRom.alpha(alpha)
ソース · [0, 1]の範囲の指定されたalphaを持つ3次Catmull–Romカーブを返します。alphaがゼロの場合、均一なスプラインが生成され、張力がゼロのcurveCardinalと同等になります。alphaが1の場合、弦状スプラインが生成されます。alphaが0.5の場合、遠心スプラインが生成されます。自己交差とオーバーシュートを避けるために、遠心スプラインが推奨されます。例:
const line = d3.line().curve(d3.curveCatmullRom.alpha(0.5));curveLinear(context)
ソース · 指定された点を通る折れ線を生成します。
curveLinearClosed(context)
ソース · 線分が終了すると最初の点を繰り返すことで、指定された点を通る閉じた折れ線を生成します。
curveMonotoneX(context)
ソースコード · Steffen が A simple method for monotonic interpolation in one dimension で提案したように、x の単調性を仮定して y の単調性を維持する三次スプラインを生成します。「連続する一階微分係数を持つ滑らかな曲線で、与えられた任意のデータ点をスパースな振動なしに通るもの。極値は、データによって与えられるグリッドポイントでのみ発生し、2つの隣接するグリッドポイント間では発生しない。」
curveMonotoneY(context)
ソースコード · y の単調性を仮定して x の単調性を維持する三次スプラインを生成します。Steffen が A simple method for monotonic interpolation in one dimension で提案したように、「連続する一階微分係数を持つ滑らかな曲線で、与えられた任意のデータ点をスパースな振動なしに通るもの。極値は、データによって与えられるグリッドポイントでのみ発生し、2つの隣接するグリッドポイント間では発生しない。」
curveNatural(context)
ソースコード · スプラインの二階微分係数を端点でゼロに設定した自然三次スプラインを生成します。
curveStep(context)
ソースコード · 交互に水平線と垂直線からなる、区分的に一定な関数（ステップ関数）を生成します。y 値は、隣接する x 値のペアの中間点で変化します。
curveStepAfter(context)
ソースコード · 交互に水平線と垂直線からなる、区分的に一定な関数（ステップ関数）を生成します。y 値は x 値の後で変化します。
curveStepBefore(context)
ソースコード · 交互に水平線と垂直線からなる、区分的に一定な関数（ステップ関数）を生成します。y 値は x 値の前で変化します。
カスタム曲線
通常、曲線は直接使用されず、line.curve と area.curve に渡されます。ただし、組み込みの曲線ではニーズを満たせない場合は、次のインターフェースを使用して独自の曲線実装を定義できます。例として curveLinear のソースコード を参照してください。この低レベルインターフェースは、線とエリアのジェネレータの代わりに、組み込みの曲線タイプで使用することもできます。
curve.areaStart()
新しいエリアセグメントの開始を示します。各エリアセグメントは、正確に2つの線分で構成されます。トップライン、それに続くベースラインで、ベースラインの点は逆順になります。
curve.areaEnd()
現在のエリアセグメントの終了を示します。
curve.lineStart()
新しい線分の開始を示します。0個以上の点が続きます。
curve.lineEnd()
現在の線分の終了を示します。
curve.point(x, y)
指定された x 値と y 値を持つ、現在の線分の新しい点を示します。