D3js-selection-api
D3.js-選択API
選択は、ドキュメントオブジェクトモデル(DOM)の強力なデータ駆動型変換です。 属性、スタイル、プロパティ、HTMLまたはテキストコンテンツなどを設定するために使用されます。 この章では、選択APIについて詳しく説明します。
APIの構成
以下のスクリプトを使用して、APIを直接構成できます。
選択APIメソッド
選択APIで最も重要なメソッドは次のとおりです。
- d3.selection()
- d3.select(selector)
- d3.selectAll(selector)
- selection.selectAll(selector)
- selection.filter(フィルター)
- selection.merge(other)
- d3.matcher(selector)
- d3.creator(name)
- selection.each(関数)
- selection.call(function [、arguments…])
- d3.local()
- local.set(node、value)
- local.get(ノード)
- local.remove(ノード)
次に、これらのそれぞれについて詳しく説明します。
d3.selection()
このメソッドは、ルート要素を選択するために使用されます。 この関数は、選択のテストや選択d3jsの拡張にも使用できます。
d3.select(selector)
このメソッドは、指定されたセレクター文字列に一致する最初の要素を選択するために使用されます。
例-次の例を考えてみましょう。
セレクタが文字列でない場合、以下で定義されている指定されたノードを選択します。
d3.selectAll(selector)
このメソッドは、指定されたセレクター文字列に一致するすべての要素を選択します。
例-次の例を考えてみましょう。
セレクタが文字列でない場合、以下で定義されているノードの指定された配列を選択します。
selection.selectAll(selector)
このメソッドは、要素を選択するために使用されます。 指定されたセレクター文字列に一致する子孫要素を選択します。 返される選択の要素は、この選択の対応する親ノードによってグループ化されます。 現在の要素の指定されたセレクタに一致する要素がない場合、またはセレクタがnullの場合、現在のインデックスのグループは空になります。
例-次の例を考えてみましょう。
selection.filter(フィルター)
このメソッドは、選択をフィルタリングするために使用され、指定されたフィルタがtrueである要素のみを含む新しい選択を返します。
例-次の例を考えてみましょう。
ここでは、テーブル行の選択をフィルターすると、奇数のみが返されます。
selection.merge(other)
このメソッドは、指定された他の選択とマージする新しい選択を返すために使用されます。
例-次の例を考えてみましょう。
d3.matcher(selector)
このメソッドは、指定されたセレクターを割り当てるために使用されます。 trueを返す関数を返します。
例-次の例を考えてみましょう。
d3.creator(name)
このメソッドは、指定された要素名を割り当てるために使用されます。これは、これが親要素であると仮定して、指定された名前の要素を作成する関数を返します。
例-次の例を考えてみましょう。
selection.each(関数)
このメソッドは、現在のデータム(d)、現在のインデックス(i)、および現在のDOM要素(nodes [i ])。 以下で説明します。
selection.call(function [、arguments…])
指定された関数を1回だけ呼び出すために使用されます。 構文は次のとおりです。
このメソッドは、次のように指定できます。
d3.local()
D3ローカルでは、データに依存しないローカル状態を定義できます。
例-次の例を考えてみましょう。
varとは異なり、各ローカルの値もDOMによってスコープされます。
local.set(node、value)
このメソッドは、指定されたノード上のこのローカルの値を値に設定します。
例-次の例を考えてみましょう。
このメソッドは、指定されたノード上のこのローカルの値を返します。 ノードがこのローカルを定義しない場合、ノードを定義する最も近い先祖から値を返します。
local.remove(ノード)
このメソッドは、指定されたノードからこのローカルの値を削除します。 ノードが定義されている場合はtrueを返し、そうでない場合はfalseを返します。