D3.js selection タグの選択と操作 - select(), selectAll()

D3.jsはSelectでタグを選択し、操作を実行できる。select, enter selection, exit selection
Tags:

Selectによるタグ選択

D3.jsはselect（単一）とselectAll（複数）でタグを選択する。selectで対象が複数ある場合は、最初の要素が選択される。

次の表では理解しやすいように、D3.jsをjQueryおよびJavaScriptと比較している。

セレクター D3.js jQuery Javascript
タグ指定 d3.select("p");, d3.selectAll("p"); $("p"); document.getElementsByTagName("p");
ID指定 d3.select("#id"); $("#id"); document.getElementById("id");
クラス指定 d3.select(".cls");, d3.selectAll(".cls"); $(".cls"); document.getElementsByClassName("cls");

セレクターは次のようにメソッドチェーンで記述し、要素を特定できる。

d3.select("#id").selectAll("p");

selectionタグの操作

選択されたオブジェクトのタグを操作する方法は次のとおりである。

タグ操作についても、次の表でD3.jsをjQueryおよびJavaScriptと比較している。

動作 d3 jQuery Javascript
属性の取得 selection.attr("id"); selection.attr("id"); selection.getAttribute("id");`
属性の追加 selection.attr("id", "name"); selection.attr("id", "name"); selection.attrAttribute("id", "name");
属性の削除 selection.attr("id", null); selection.removeAttr("id"); selection.removeAttribute("id");
クラスの追加 selection.classed("cls", true); selection.addClass("cls"); selection.classList.add("cls");
クラスの削除 selection.classed("cls", false); selection.removeClass("cls"); selection.classList.remove("cls");
スタイルの取得 selection.style("color"); selection.css("color"); selection.style.color;
スタイルの設定 selection.style("color", "blue"); selection.css("color", "blue"); selection.style.color = "blue";
スタイルの削除 selection.style("color", null); selection.css("color", ""); selection.style.color = "";
プロパティ値の取得 selection.property("checked"); selection.prop("checked"); selection.checked;
プロパティ値の設定 selection.property("checked", true); selection.prop("checked", true); selection.checked = true;
HTMLの取得 selection.html(); selection.html(); selection.innerHTML;
HTMLの設定 selection.html("<p>値</p>"); selection.html("<p>値</p>"); selection.innerHTML = "<p>値</p>";
要素の追加 selection.append("p"); selection.append("<p></p>"); selection.appendChild(document.createElement('div'));
要素の削除 selection.remove(); selection.remove(); selection.parentNode.removeChild(selection);

Selectの基本的な使い方

まず例として次のようなHTMLを作成する。

<div>
  <div class="num">One</div>
  <div class="num">Two</div>
  <div class="num">Three</div>
  <div class="num">Four</div>
</div>

<script src="https://d3js.org/d3.v7.min.js"></script>

select()

select()メソッドを使って、一致した最初のDOM要素を選択し、スタイルを設定する。

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

selectAll()

selectAll()メソッドで、一致したすべてのDOM要素を選択し、スタイルを設定する。

d3.selectAll(".num")
  .style("font-size", "2em");

append()

append()メソッドで要素を追加することもできる。

d3.selectAll(".num")
  .append("span")
  .text(" apple");

style()のfunc引数

styleの第2引数に固定値ではなく関数オブジェクトを使用し、動的にスタイルを設定する。関数オブジェクトの引数には、data（後で再度説明）とindex（一致した要素の順番）が渡される。

d3.selectAll(".num")
  .style("background-color", (data, index) => `hsl(${30 * index}, 50%, 90%)`);

data()

data()を使用して、一致した各要素にdataを割り当てる。割り当てられたデータは、styleなどに渡される関数の第1引数として渡される。 DOM要素の数とdataの数に応じて対応している部分をupdate selectionと呼ぶ。

d3.selectAll(".num")
  .data([1, 2, 3, 4])
  .style("margin-left", (data, index) => `${data}em`);

参考