D3js-selection-api
D3.js-選択API
選択は、ドキュメントオブジェクトモデル(DOM)の強力なデータ駆動型変換です。 属性、スタイル、プロパティ、HTMLまたはテキストコンテンツなどを設定するために使用されます。 この章では、選択APIについて詳しく説明します。
APIの構成
以下のスクリプトを使用して、APIを直接構成できます。
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>
</script>
選択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)
このメソッドは、指定されたセレクター文字列に一致する最初の要素を選択するために使用されます。
例-次の例を考えてみましょう。
var body = d3.select("body");
セレクタが文字列でない場合、以下で定義されている指定されたノードを選択します。
d3.select("p").style("color", "red");
d3.selectAll(selector)
このメソッドは、指定されたセレクター文字列に一致するすべての要素を選択します。
例-次の例を考えてみましょう。
var body = d3.selectAll("body");
セレクタが文字列でない場合、以下で定義されているノードの指定された配列を選択します。
d3.selectAll("body").style("color", "red");
selection.selectAll(selector)
このメソッドは、要素を選択するために使用されます。 指定されたセレクター文字列に一致する子孫要素を選択します。 返される選択の要素は、この選択の対応する親ノードによってグループ化されます。 現在の要素の指定されたセレクタに一致する要素がない場合、またはセレクタがnullの場合、現在のインデックスのグループは空になります。
例-次の例を考えてみましょう。
var b = d3.selectAll("p").selectAll("b");
selection.filter(フィルター)
このメソッドは、選択をフィルタリングするために使用され、指定されたフィルタがtrueである要素のみを含む新しい選択を返します。
例-次の例を考えてみましょう。
var even = d3.selectAll("tr").filter(":nth-child(odd)");
ここでは、テーブル行の選択をフィルターすると、奇数のみが返されます。
selection.merge(other)
このメソッドは、指定された他の選択とマージする新しい選択を返すために使用されます。
例-次の例を考えてみましょう。
var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);
d3.matcher(selector)
このメソッドは、指定されたセレクターを割り当てるために使用されます。 trueを返す関数を返します。
例-次の例を考えてみましょう。
var p = selection.filter(d3.matcher("p"));
d3.creator(name)
このメソッドは、指定された要素名を割り当てるために使用されます。これは、これが親要素であると仮定して、指定された名前の要素を作成する関数を返します。
例-次の例を考えてみましょう。
selection.append(d3.creator("p"));
selection.each(関数)
このメソッドは、現在のデータム(d)、現在のインデックス(i)、および現在のDOM要素(nodes [i ])。 以下で説明します。
parent.each(function(p, j) {
d3.select(this)
.selectAll(".child")
.text(function(d, i) { return "child " + d.name + " of " + p.name; });
});
selection.call(function [、arguments…])
指定された関数を1回だけ呼び出すために使用されます。 構文は次のとおりです。
function name(selection, first, last) {
selection.attr("first-name", first).attr("last-name", last);
}
このメソッドは、次のように指定できます。
d3.selectAll("p").call(name, "Adam", "David");
d3.local()
D3ローカルでは、データに依存しないローカル状態を定義できます。
例-次の例を考えてみましょう。
var data = d3.local();
varとは異なり、各ローカルの値もDOMによってスコープされます。
local.set(node、value)
このメソッドは、指定されたノード上のこのローカルの値を値に設定します。
例-次の例を考えてみましょう。
selection.each(function(d)
{ data.set(this, d.value); });
local.get(node)
このメソッドは、指定されたノード上のこのローカルの値を返します。 ノードがこのローカルを定義しない場合、ノードを定義する最も近い先祖から値を返します。
local.remove(ノード)
このメソッドは、指定されたノードからこのローカルの値を削除します。 ノードが定義されている場合はtrueを返し、そうでない場合はfalseを返します。