D3.js v5|メソッド一覧(データの選択・変更)

こちらのサイト「d3-selection」を参考に、要素の選択・変更についてまとめました。

※ 随時更新

1.selectionとは?

selectionは、属性・スタイル・プロパティ・HTMLまたはテキストなどを選択し、データに対応する要素を追加・削除またはプロパティ値を設定することができます。

例えば、全ての段落要素(p)にフォント色を設定する場合、次のようにします。

d3.selectAll(“p”)
全ての段落要素を選択します。

.style(“color”, “white”);
選択した要素の文字色を白に設定します。

2.要素を選択するメソッド一覧

2−1.d3.select(selector)

引数で指定したセレクタ文字列に一致する最初の要素を選択します。
要素はドキュメント(HTML)の上から下の順に選択されます。
一致する要素がない場合は空の選択を返します。

ドキュメント内の最初の段落要素を選択するには次のようにします。

Demoを表示

また、文字列ではなく this のようにすると選択中のノードを意味します。
例えば、選択した段落要素のみスタイルを変更するには、次のようにします。

Demoを表示

2−2.d3.selectAll(selector)

引数で指定されたセレクタ文字列に一致するすべての要素を選択します。
要素はドキュメント(HTML)の上から下の順に選択されます。
一致する要素がない場合は空の選択を返します。

すべての段落要素を選択するには次のようにします。

また、引数のセレクタは文字列以外に、要素の配列を指定することができます。
例えば、すべてのチェックボックを ON にするには、次のようにします。

Demoを表示

2−3.selection.select(selector)

選択された要素(selection)ごとに、指定されたセレクタ文字列(select(selector))に一致する最初の子孫要素を選択します。
複数の要素がセレクタと一致する場合、ドキュメント順(上から下)で最初に一致する要素のみ選択されます。

例えば、各divの最初の段落(p要素)にスタイルを当てる場合は、次のようにします。

Demoを表示

また、引数のセレクタには関数も指定することができます。
例えば、各div要素の最初のチェックボックスを ON にするには、次のようにします。

Demoを表示

2−4.selection.selectAll(selector)

選択された要素(selection)ごとに、引数で指定されたセレクタ文字列(selectAll(selector))に一致する全ての子孫要素を選択します。

例えば、各div要素内の全ての各段落を選択するには、次のようにします。

Demoを表示

また、引数で指定するセレクタは関数を指定することもできます。
例えば、各段落要素(p)内の 全てのチェックボックを選択する場合は、次のようにします。

Demoを表示

2−5.selection.filter(filter)

選択された要素(selection)をフィルタリングし、一致する要素(true)のみ返します。
フィルタは、セレクタ文字列または関数を指定することができます。

例えば、テーブルの偶数行のみフィルタリングするには、次のようにします。

関数を使う場合

また、フィルタ前後でインデックスを同じにしたい場合は、filterではなく、select を使い次のようにします。

Demoでは、5行のうち偶数行のみ(2行目と4行目)選択されます。
filterを使った①と②の場合、選択後の各要素のインデックスは、0と1のため、元のインデックスが保持されていません。

次は、selectを使った場合の、選択後の各要素のインデックスです。
インデックスが1(2行目)と3(4行目)となっているため、選択前の5行あった状態のインデッックスが保持されていることが分かります。

①〜③の各 Demoは以下となります。

①のDemoを表示 ②のDemoを表示 ③のDemoを表示

2−6.selection.merge(other)

選択された要素同士をマージします。
主に、データ結合の後に新規生成された要素(enter)と既存要素の更新(update)をマージするために使用されます。

2−7.d3.matcher(selector)

引数で指定されたセレクタと要素が一致する場合にtrueを返します。
このメソッドは、selection.filterが内部的に使用します。
次のようになります。

2−8.d3.selector(selector)

引数で指定されたセレクタに一致する最初の子孫要素を返します。
このメソッドは、selection.selectが内部的に使用します。
次のようになります。

2−9.d3.selectorAll(selector)

引数で指定されたセレクタに一致するすべての子孫要素を返します。
このメソッドは、selection.selectAllが内部的に使用します。
次のようになります。

2−10.d3.window(node)

引数で指定されたノードの所有者ウィンドウを返します。

2−11.d3.style(node, name)

引数で指定されたノード・指定された名前を持つ、スタイルのプロパティ値を返します。

3.要素を変更するメソッド一覧

3−1.selection.attr(name[, value])

選択した要素の属性(name)を指定した値(value)に設定します。
valueにnullを指定すると、その属性が削除されます。
また、属性(name) のみ指定した場合、現在の値を返します。

属性の追加
要素に属性(name)を追加するには、次のようにします。

変更前・後の htmlは次のようになります。

変更後の p要素に name=”add-name” が設定されています。

属性の削除(valueにnullを指定)
要素の属性(name)を削除するには、次のようにします。

変更前・後の htmlは次のようになります。

変更後のp要素から、 name属性が削除されています。

属性の参照
要素の属性(name)に設定されている値を参照するには、次のようにします。

この場合、変数show_attrには、属性(nameの値)”show-name” が代入されます。

Demoを表示(selection.attr)

3−2.selection.classed(names[, value])

選択した要素に、指定したクラス(names)を追加します。
引数(value)に true を指定した場合のみ、クラスが追加されます。
また、複数クラスを一度に追加することもでき、その場合、各クラスを半角スペースで区切ります。 “class1 class2”
既に設定されているクラスを削除する時は、引数(value)に false を指定します。
namesのみ指定した場合は、指定したクラスが既に設定されているか確認することができます。

クラスの追加
クラス(blueとbold)を追加するには、次のようにします。

変更前・後のhtmlは次のようになります。

クラスに、”blue bold” が追加されます。

クラスの削除
クラス blueとboldが設定済みの状態から、boldのみ削除する場合は次のようにします。

変更前・後のhtmlは次のようになります。

クラスから、 bold が削除されました。

クラスの設定確認
クラス bold が設定されているか確認するには次のようにします。

この場合、対象要素のクラスには、bold が設定されているので、変数 exists_trueには、 trueが代入されます。
もし、指定したクラスが設定されていない場合は、false が返ります。

クラスの追加(関数)
引数(value)には、関数を指定することもでき、戻り値は true もしくは false を設定します。
関数を使うとある条件の場合のみ、クラスを追加・削除する ということが行えます。

クラスの追加をランダムに行うには、次のようにします。

変更前・後のhtmlは、次のようになります。

変更後のp要素に、ランダムにクラス(blue)が追加されます。

Demoを表示(selection.classed)

3−3.selection.style(name[, value[, priority]])

選択した要素に、指定した名前(name)・値(value)のstyleプロパティを設定します。
valueにnull値を指定すると、対象(name)のstyleプロパティが削除されます。
また、valueには関数も指定でき、戻り値は styleプロパティの設定値として使用されます。
nameのみ指定した場合は、styleプロパティの値が返されます。

styleの追加
style(”font-weight”,”bold” )を追加する場合は、次のようにします。

変更前・後のhtmlは、次のようになります。

div要素のstyleに、”font-weight”,”bold”  が設定されます。

styleの削除
style(”font-weight”)を削除するには、次のようにします。

変更前・後のhtmlは、次のようになります。

div要素のstyleから、”font-weight” が削除されました。

styleの参照
style(”font-weight”)に設定されている値を参照するには、次のようにします。

変数 show には、”bold” が代入されます。

styleの追加(関数)
ランダムにstyle(”font-weight”)を設定するには、次のようにします。

変更前・後のhtmlは、次のようになります。

ランダムにstyleが設定されました。

Demoを表示(selection.style)

3−4.selection.property(name[, value])

attrやstyleメソッドで設定できない属性には、propertyメソッドを使用します。
選択した要素に、指定したプロパティ名(name)とその値(value)を設定します。
valueに、null を指定すると対象のプロパティが削除されます。
また、nameのみ指定した場合、そのプロパティ値を返します。

プロパティの追加
テキストボックスに値を設定(value)するには、次のようにします。

チェックボックスを、オンにするには、次のようにします。

プロパティの変更
プロパティの追加と同様の手順で設定します。

プロパティの参照
プロパティ(value)に設定されている値を参照するには、次のようにします。

変数 text_val には、”show-text” が代入されます。

Demoを表示(selection.property)

3−5.selection.text([value])

選択した要素の、テキストコンテンツを指定した値(value)に設定し、子要素を置き換えます。
valueには、関数を指定することができ、戻り値は各要素のテキストコンテンツを設定するために使用されます。
また、value に null を指定すると、コンテンツは消去されます。
valueを指定しない場合は、選択した要素のテキストコンテンツを返します。

テキストの追加
段落要素(p)にテキスト追加するには、次のようにします。

変更前・後のhtmlは、次のようになります。

テキストの変更
テキストの追加と同じ方法で行います。

テキストの削除
テキストを削除するには、valueに nullを指定します。

変更前・後のhtmlは、次のようになります。

テキストの参照

変数 text_val には、”show text” が代入されます。

テキストの追加(関数)
関数で現在年月日を求め、その結果をテキストに設定するには、次のようにします。

変更前・後のhtmlは、次のようになります。

Demoを表示(selection.text)

3−6.selection.html([value])

valueに指定した値で、選択した要素の子要素のhtmlを置き換えます。
valueには文字列の他に関数を指定することができ、戻り値は子要素のhtmlを設定するために使用されます。
また、value に null を指定するとコンテンツは消去されます。
valueを指定しない場合は、子要素のhtmlを返します。
htmlメソッドは、innerHTMLを操作するため、svgやhtml以外の要素で、innerHTMLをサポートしていない要素については、使用することができません。

htmlの追加
選択した要素の、子要素として段落要素(p)を追加するには、次のようにします。

変更前・後のhtmlは、次のようになります。

htmlの更新
既に子要素が存在する、div要素を更新するには次のようにします。

変更前・後のhtmlは、次のようになります。

変更前の子要素が、置き換えられました。

htmlの削除
選択した要素の子要素を削除するには、次のようにします。

変更前・後のhtmlは、次のようになります。

htmlの参照
選択した要素の子要素を参照するには、次のようにします。

変数 text_val には、”<p>show text</p>” が代入されます。

Demoを表示(selection.html)

3−7.selection.append(type)

選択した要素の最後の子として、新しい要素を追加します。
typeには文字列の他に関数も指定でき、戻り値は追加する要素を返す必要があります。 (新しい要素、もしくは既存の要素)

例えば、全てのdiv要素に段落要素を追加するには、次のようにします。

変更前・後のhtmlは、次のようになります。

Demoを表示(selection.append)

※真っ白なページが表示されますが、ページのソースを表示すると、変更後の状態を確認できます。

3−8.selection.insert(type[, before])

typeで指定した要素を追加します。
beforeは、追加する要素の場所を指定します。デフォルト(未指定)の場合は、null となり、追加する要素は、選択した要素の最後の子として追加されます。
beforeを指定した場合は、指定した要素の前の要素として追加されます。

例えば、before を指定しない場合は、次のようになります。

変更前・後のhtmlは、次のようになります。

段落要素(p)は、選択したdiv要素の最後の子として追加されます。

次に、 beforeを指定した場合は、次のようになります。

変更前・後のhtmlは、次のようになります。

before で table要素を指定しているので、table要素の前に段落要素(p)が追加されます。

3−9.selection.remove()

選択した要素をドキュメントから削除します。

div要素内のすべての段落要素(p)を削除するには、次のようにします。

変更前・後のhtmlは、次のようになります。

3−10.selection.clone([deep])

選択した要素の複製を生成し、選択した要素の直後に挿入します。
また、戻り値として追加した要素の選択を返します。
deepを有効(true)にした場合は、選択した要素の子孫ノードも同様に複製されます。

要素を複製する場合は、次のようにします。deepは未指定(false)

変更前・後のhtmlは、次のようになります。

選択したdiv要素のみ複製・追加されました。

次に、deepを有効にした場合です。

変更前・後のhtmlは、次のようになります。

選択したdiv要素の子要素も含め複製され、追加されました。

Demoを表示(selection.clone)deep 無効

Demoを表示(selection.clone)deep 有効

3−11.selection.sort(compare)

選択した要素を、指定したソート順(compare)で並び替えます。
compareは、デフォルト(未指定)では昇順になり、2つの要素のデータaとbを渡して比較します。
戻り値は、負の値、正の値、またはゼロを返す必要があります。

負の値の場合
a は b の前になります。例えば、a = 1 、 b = 5 の場合は、1,5 と昇順の並びとなります。

正の値の場合
a は b の後ろになります。例えば、a = 1 、 b = 5 の場合は、5,1と降順の並びとなります。

ゼロの場合
a と b は等価とみなされます。

選択した段落要素(p)を降順に並び替える場合は、次のようにします。

変更前・後のhtmlは、次のようになります。

Demoを表示(selection.sort)

3−12.selection.raise()

選択した各要素を、親の最後の子として順番に再挿入します。

例えば、div要素内の最初の段落要素(p)を最後の子要素として再挿入するには次のようにします。

変更前・後のhtmlは、次のようになります。

Demoを表示(selection.raise())

3−13.selection.lower()

選択した各要素を親の最初の子として順番に再挿入します。

例えば、div要素内の最後の段落要素(p)を最初の子要素として再挿入するには次のようにします。

変更前・後のhtmlは、次のようになります。

Demoを表示(selection.lower())

3−14.d3.creator(name)

selection.append や selection.insertによって内部的に使用され、nameで指定した新しい要素を作成します。

appendでは次のように使用されています。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする