線

例 · 線ジェネレータは、線グラフのように、スプラインまたはポリラインを生成します。線は、階層的エッジバンドリングのリンクなど、他の多くの視覚化タイプにも表示されます。放射状線も参照してください。

line(x, y)

ソース · 指定されたxおよびyアクセッサを使用して、新しい線ジェネレータを構築します。

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

xまたはyが指定されていない場合、それぞれのデフォルト値が使用されます。上記は、より明確に次のように表現できます。

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

line(data)

ソース · 指定されたdata配列に対して線を生成します。

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

線ジェネレータにコンテキストがある場合、線は一連のパスメソッド呼び出しとしてこのコンテキストにレンダリングされ、この関数はvoidを返します。それ以外の場合は、パスデータ文字列が返されます。

注意

この線ジェネレータに関連付けられたカーブによっては、指定された入力dataは、線ジェネレータに渡される前にx値でソートする必要がある場合があります。

line.x(x)

ソース · xが指定されている場合、xアクセッサを指定された関数または数値に設定し、この線ジェネレータを返します。

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

xが指定されていない場合、現在のxアクセッサを返します。

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

xアクセッサのデフォルトは次のとおりです。

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

線が生成されると、xアクセッサは入力データ配列内の各定義済み要素に対して呼び出され、要素d、インデックスi、および配列dataが3つの引数として渡されます。

デフォルトのxアクセッサは、入力データが数値の2要素配列であることを前提としています。データの形式が異なる場合、またはレンダリング前にデータを変換する場合は、カスタムアクセッサを指定する必要があります。

line.y(y)

ソース · yが指定されている場合、yアクセッサを指定された関数または数値に設定し、この線ジェネレータを返します。

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

線が生成されると、yアクセッサは入力データ配列内の各定義済み要素に対して呼び出され、要素d、インデックスi、および配列dataが3つの引数として渡されます。

yが指定されていない場合、現在のyアクセッサを返します。

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

yアクセッサのデフォルトは次のとおりです。

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

デフォルトのyアクセッサは、入力データが数値の2要素配列であることを前提としています。line.xを参照してください。

line.defined(defined)

例 · ソース · definedが指定されている場合、definedアクセッサを指定された関数またはブール値に設定し、この線ジェネレータを返します。

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

線が生成されると、definedアクセッサは入力データ配列内の各要素に対して呼び出され、要素d、インデックスi、および配列dataが3つの引数として渡されます。指定された要素が定義されている場合（つまり、この要素に対してdefinedアクセッサが真の値を返す場合）、xおよびyアクセッサがその後評価され、点が現在の線セグメントに追加されます。それ以外の場合は、要素がスキップされ、現在の線セグメントが終了し、次の定義済み点に対して新しい線セグメントが生成されます。

definedが指定されていない場合、現在のdefinedアクセッサを返します。

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

definedアクセッサのデフォルトは定数trueであり、入力データは常に定義されていると仮定します。

function defined() {
  return true;
}

線セグメントが1点のみで構成されている場合、丸められたまたは四角いラインキャップでレンダリングされない限り、非表示になる場合があります。さらに、curveCardinalOpenなどのカーブは、複数の点を含む場合にのみ、表示可能なセグメントをレンダリングします。

line.curve(curve)

ソース · curveが指定されている場合、カーブファクトリを設定し、この線ジェネレータを返します。

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

curveが指定されていない場合、現在のカーブファクトリを返します。デフォルトはcurveLinearです。

line.curve() // d3.curveStep

line.context(context)

ソース · contextが指定されている場合、コンテキストを設定し、この線ジェネレータを返します。

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

contextが指定されていない場合、現在のコンテキストを返します。

line.context() // context

コンテキストのデフォルトはnullです。コンテキストがnullでない場合、生成された線は、一連のパスメソッド呼び出しとしてこのコンテキストにレンダリングされます。それ以外の場合は、生成された線を表すパスデータ文字列が返されます。

line.digits(digits)

ソース · digitsが指定されている場合、小数点以下の桁数の最大値を設定し、この線ジェネレータを返します。

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

digitsが指定されていない場合、現在の最大小数桁数を返します。デフォルトは3です。

line.digits() // 3

このオプションは、関連付けられたcontextがnullの場合、つまりこの線ジェネレータがパスデータを生成するために使用される場合にのみ適用されます。