D3.js-選択API

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

APIの構成

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

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

</script>

選択APIメソッド

以下は、selectionAPIで最も重要なメソッドです。

• d3.selection()
• d3.select(selector)
• d3.selectAll(selector)
• selection.selectAll(selector)
• selection.filter(filter)
• selection.merge(other)
• d3.matcher(selector)
• d3.creator(name)
• selection.each(function)
• selection.call（function [、arguments…]）
• d3.local()
• local.set（node、value）
• local.get(node)
• local.remove(node)

これらのそれぞれについて詳しく説明しましょう。

d3.selection（）

このメソッドは、ルート要素を選択するために使用されます。この関数は、選択をテストしたり、選択d3jsを拡張したりするためにも使用できます。

d3.select（selector）

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

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

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

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

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

d3.selectAll（selector）

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

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

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

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

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

selection.selectAll（selector）

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

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

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

selection.filter（filter）

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

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

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

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

selection.merge（other）

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

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

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

d3.matcher（selector）

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

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

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

d3.creator（name）

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

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

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

selection.each（function）

このメソッドは、現在のデータ（d）、現在のインデックス（i）、現在のグループ（nodes）から渡された順序で、選択された要素ごとに指定された関数を呼び出すために使用されます。 ]）。以下に説明します。

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 localを使用すると、データに依存しないローカル状態を定義できます。

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

var data = d3.local();

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

local.set（node、value）

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

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

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

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

local.remove（node）

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