byObservableエリア
例 · エリアジェネレータは、エリアチャートのように、*トップライン*と*ベースライン*で定義されたエリアを生成します。通常、2つの線は同じx値(x0 = x1)を共有し、y値(y0とy1)のみが異なります。最も一般的には、y0は0を表す定数（yスケールの0に対する出力）として定義されます。*トップライン*はx1とy1で定義され、最初にレンダリングされます。*ベースライン*はx0とy0で定義され、2番目に逆順で点がレンダリングされます。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));エリアジェネレータにコンテキストがある場合、エリアは一連のパスメソッド呼び出しとしてこのコンテキストにレンダリングされ、この関数は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の3つの引数が渡されます。
xが指定されていない場合、現在のx0アクセサを返します。
area.x0() // () => 20x0アクセサのデフォルトは次のとおりです。
function x(d) {
return d[0];
}デフォルトのx0アクセサは、入力データが数値の2要素配列[[x0, y0], [x1, y1], …]であることを前提としています。データの形式が異なる場合、またはレンダリング前にデータを変更する場合は、上記のようにカスタムアクセサを指定する必要があります。
area.x1(x)
ヒント
このメソッドは、時間が右→ではなく下↓に行く場合のように、垂直方向のエリアを対象としています。より一般的な水平方向のエリアには、代わりにarea.xを使用してください。
ソース · xが指定されている場合、x1アクセサを指定された関数または数値に設定し、このエリアジェネレータを返します。
const area = d3.area().x1((d) => x(d.Close));エリアが生成されると、x1アクセサは入力データ配列内の各定義済みの要素に対して呼び出され、要素d、インデックスi、および配列dataの3つの引数が渡されます。
xが指定されていない場合、現在のx1アクセサを返します。
area.x1() // (d) => x(d.Close)x1アクセサのデフォルトはnullで、以前に計算されたx0値をx1値に再利用することを示します。このデフォルトは、水平方向のエリアを対象としています。
area.y(y)
ソース · 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の3つの引数が渡されます。ベースラインが一定の水平方向のエリア（つまり、スタックされていないエリア、リボンやバンドではないエリア）の場合、y0は通常、0に対するyスケールの出力に設定されます。
yが指定されていない場合、現在のy0アクセサを返します。
area.y0() // () => 360y0アクセサのデフォルトは次のとおりです。
function y() {
return 0;
}デフォルトのSVG座標系では、デフォルトの0は下ではなくチャートの上部を表し、反転した（または「ぶら下がった」）エリアが生成されます。
area.y1(y)
ソース · yが指定されている場合、y1アクセサを指定された関数または数値に設定し、このエリアジェネレータを返します。
const area = d3.area().y1((d) => y(d.Close));エリアが生成されると、y1アクセサは入力データ配列内の各定義済みの要素に対して呼び出され、要素d、インデックスi、および配列dataの3つの引数が渡されます。
yが指定されていない場合、現在のy1アクセサを返します。
area.y1() // (d) => y(d.Close)y1アクセサのデフォルトは次のとおりです。
function y(d) {
return d[1];
}デフォルトのy1アクセサは、入力データが数値の2要素配列[[x0, y0], [x1, y1], …]であることを前提としています。データの形式が異なる場合、またはレンダリング前にデータを変更する場合は、上記のようにカスタムアクセサを指定する必要があります。nullアクセサも許可されており、以前に計算されたy0値をy1値に再利用することを示します。これは、時間が右→ではなく下↓に行く場合のように、垂直方向のエリアに使用できます。
area.defined(defined)
例 · ソース · definedが指定されている場合、definedアクセサを指定された関数またはブール値に設定し、このエリアジェネレータを返します。
const area = d3.area().defined((d) => !isNaN(d.Close));エリアが生成されると、definedアクセサは入力データ配列内の各要素に対して呼び出され、要素d、インデックスi、および配列dataの3つの引数が渡されます。指定された要素が定義されている場合（つまり、この要素に対してdefinedアクセサが真の値を返す場合）、x0、x1、y0、およびy1アクセサはその後評価され、その点は現在のエリアセグメントに追加されます。それ以外の場合は、要素はスキップされ、現在のエリアセグメントは終了し、次の定義済みの点に対して新しいエリアセグメントが生成されます。その結果、生成されたエリアにはいくつかの離散セグメントが含まれる場合があります。
definedが指定されていない場合、現在のdefinedアクセサを返します。
area.defined() // (d) => !isNaN(d.Close)definedアクセサのデフォルトは定数trueであり、入力データは常に定義されていると仮定します。
function defined() {
return true;
}面積セグメントが単一点のみで構成される場合、丸められた線端または四角い線端でレンダリングしない限り、非表示に見える可能性があります。線端を参照してください。さらに、curveCardinalOpenなどのいくつかの曲線は、複数の点を含む場合にのみ、可視セグメントをレンダリングします。
area.curve(curve)
ソースコード · curveが指定されている場合、カーブファクトリを設定し、このエリアジェネレータを返します。
const area = d3.area().curve(d3.curveStep);curveが指定されていない場合、現在のカーブファクトリを返します。デフォルトはcurveLinearです。
area.curve() // d3.curveSteparea.context(context)
ソースコード · contextが指定されている場合、コンテキストを設定し、このエリアジェネレータを返します。
const context = canvas.getContext("2d");
const area = d3.area().context(context);contextが指定されていない場合、現在のコンテキストを返します。
area.context() // contextコンテキストのデフォルトはnullです。コンテキストがnullでない場合、生成されたエリアは、パスメソッドの呼び出しのシーケンスとしてこのコンテキストにレンダリングされます。それ以外の場合は、生成されたエリアを表すパスデータ文字列が返されます。
area.digits(digits)
ソースコード · digitsが指定されている場合、小数点以下の桁数の最大値を設定し、このエリアジェネレータを返します。
const area = d3.area().digits(3);digitsが指定されていない場合、現在の最大小数桁数を返します。デフォルトは3です。
area.digits() // 3このオプションは、関連付けられたcontextがnullの場合（このエリアジェネレータがパスデータを生成するために使用される場合）にのみ適用されます。
area.lineX0()
area.lineY0のエイリアスです。
area.lineY0()
ソースコード · このエリアジェネレータの現在のdefinedアクセサ、curve、contextを持つ新しいラインジェネレータを返します。ラインのxアクセサはこのエリアのx0アクセサであり、ラインのyアクセサはこのエリアのy0アクセサです。
area.lineX1()
ソースコード · このエリアジェネレータの現在のdefinedアクセサ、curve、contextを持つ新しいラインジェネレータを返します。ラインのxアクセサはこのエリアのx1アクセサであり、ラインのyアクセサはこのエリアのy0アクセサです。
area.lineY1()
ソースコード · このエリアジェネレータの現在のdefinedアクセサ、curve、contextを持つ新しいラインジェネレータを返します。ラインのxアクセサはこのエリアのx0アクセサであり、ラインのyアクセサはこのエリアのy1アクセサです。