d3.js

d3.jsのセレクタとタグ操作

More than 1 year has passed since last update.

はじめに

d3.jsは、セレクタでタグを選択し、操作を行う。
バージョン3.xでのd3の選択、操作をjQuery, javascriptと共にまとめます。

d3.jsセレクタ

d3.jsはselect(単一), selectAll(複数)でタグを選択する。
selectで対象が複数ある場合は、1コ目の要素が選択される。

セレクタ d3 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");

タグ操作

セレクタに続いて記述する。

操作 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>value</p>"); selection.html("<p>value</p>"); selection.innerHTML = "<p>value</p>";
要素追加 selection.append("p"); selection.append("<p></p>"); selection.appendChild(document.createElement('div'));
要素削除 selection.remove(); selection.remove(); selection.parentNode.removeChild(selection);

dataとenterとexit

dataはセレクタで選択した要素と配列の値(dataset)を関連付ける。
enterは、要素よりdatasetが多い場合、余剰分のdatasetの選択を返す。

var dataset = [...];
selection.data(dataset).enter();

enterの利用例

exitは、datasetより要素が多い場合、余剰分の要素の選択を返す。

var dataset = [...];
selection.data(dataset).exit();

exitの利用例

enterとexitの両方を使ってみました。
enterとexitの利用例