D3js-selection-api

D3.js-選択API

選択は、ドキュメントオブジェクトモデル（DOM）の強力なデータ駆動型変換です。 属性、スタイル、プロパティ、HTMLまたはテキストコンテンツなどを設定するために使用されます。 この章では、選択APIについて詳しく説明します。

APIの構成

以下のスクリプトを使用して、APIを直接構成できます。

<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>

</script>

Copy

選択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");

Copy

セレクタが文字列でない場合、以下で定義されている指定されたノードを選択します。

d3.select("p").style("color", "red");

Copy

d3.selectAll（selector）

このメソッドは、指定されたセレクター文字列に一致するすべての要素を選択します。

例-次の例を考えてみましょう。

var body = d3.selectAll("body");

Copy

セレクタが文字列でない場合、以下で定義されているノードの指定された配列を選択します。

d3.selectAll("body").style("color", "red");

Copy

selection.selectAll（selector）

このメソッドは、要素を選択するために使用されます。 指定されたセレクター文字列に一致する子孫要素を選択します。 返される選択の要素は、この選択の対応する親ノードによってグループ化されます。 現在の要素の指定されたセレクタに一致する要素がない場合、またはセレクタがnullの場合、現在のインデックスのグループは空になります。

例-次の例を考えてみましょう。

var b = d3.selectAll("p").selectAll("b");

Copy

selection.filter（フィルター）

このメソッドは、選択をフィルタリングするために使用され、指定されたフィルタがtrueである要素のみを含む新しい選択を返します。

例-次の例を考えてみましょう。

var even = d3.selectAll("tr").filter(":nth-child(odd)");

Copy

ここでは、テーブル行の選択をフィルターすると、奇数のみが返されます。

selection.merge（other）

このメソッドは、指定された他の選択とマージする新しい選択を返すために使用されます。

例-次の例を考えてみましょう。

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

Copy

d3.matcher（selector）

このメソッドは、指定されたセレクターを割り当てるために使用されます。 trueを返す関数を返します。

例-次の例を考えてみましょう。

var p = selection.filter(d3.matcher("p"));

Copy

d3.creator（name）

このメソッドは、指定された要素名を割り当てるために使用されます。これは、これが親要素であると仮定して、指定された名前の要素を作成する関数を返します。

例-次の例を考えてみましょう。

selection.append(d3.creator("p"));

Copy

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; });
});

Copy

selection.call（function [、arguments…]）

指定された関数を1回だけ呼び出すために使用されます。 構文は次のとおりです。

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

Copy

このメソッドは、次のように指定できます。

d3.selectAll("p").call(name, "Adam", "David");

Copy

d3.local（）

D3ローカルでは、データに依存しないローカル状態を定義できます。

例-次の例を考えてみましょう。

var data = d3.local();

Copy

varとは異なり、各ローカルの値もDOMによってスコープされます。

local.set（node、value）

このメソッドは、指定されたノード上のこのローカルの値を値に設定します。

例-次の例を考えてみましょう。

selection.each(function(d)
   { data.set(this, d.value); });
local.get(node)

Copy

このメソッドは、指定されたノード上のこのローカルの値を返します。 ノードがこのローカルを定義しない場合、ノードを定義する最も近い先祖から値を返します。

local.remove（ノード）

このメソッドは、指定されたノードからこのローカルの値を削除します。 ノードが定義されている場合はtrueを返し、そうでない場合はfalseを返します。