ローカル変数

D3のローカル変数を使用すると、データに依存しないローカルな状態を定義できます。 たとえば、時系列データの小規模な複数のグラフをレンダリングする場合、すべてのグラフで同じxスケールを使用し、各メトリクスの相対的なパフォーマンスを比較するために異なるyスケールを使用することがあります。D3のローカル変数はDOM要素によってスコープ設定されます。設定時、値は指定された要素に格納されます。取得時、値は指定された要素またはそれを定義する最も近い祖先から取得されます。

注意

ローカル変数が使用されることはめったにありません。必要な状態は選択のデータに保存する方が簡単な場合があります。

local()

ソース · 新しいローカル変数を宣言します。

const foo = d3.local();

varと同様に、各ローカル変数は個別のシンボリック参照です。varとは異なり、各ローカル変数の値もDOMによってスコープ設定されます。

local.set(node, value)

ソース · 指定されたノードのこのローカル変数の値をvalueに設定し、指定されたvalueを返します。これは、selection.eachを使用して実行されることがよくあります。

selection.each(function(d) {
  foo.set(this, d.value);
});

単一の変数を設定するだけの場合は、selection.propertyの使用を検討してください。

selection.property(foo, (d) => d.value);

local.get(node)

ソース · 指定されたノードのこのローカル変数の値を返します。

selection.each(function() {
  const value = foo.get(this);
});

ノードがこのローカル変数を定義していない場合、それを定義する最も近い祖先から値を返します。祖先がこのローカル変数を定義していない場合は、未定義を返します。

local.remove(node)

ソース · 指定されたノードからこのローカル変数の値を削除します。

selection.each(function() {
  foo.remove(this);
});

ノードが削除前にこのローカル変数を定義していた場合はtrueを返し、それ以外の場合はfalseを返します。祖先もこのローカル変数を定義している場合、それらの定義は影響を受けないため、local.getは引き続き継承された値を返します。

local.toString()

ソース · このローカル変数に対して自動生成された識別子を返します。これは、ローカル変数の値を要素に保存するために使用されるプロパティの名前であり、element[local]を使用するか、selection.propertyを使用して、ローカル変数の値を設定または取得することもできます。