D3.js selection tag selection and manipulation - select(), selectAll()

D3.js can select tags with Select and manipulate them. select, enter selection, exit selection
Tags:

Selecting tags

D3.js selects tags with select for a single element and selectAll for multiple elements. If multiple targets match select, the first element is selected.

The table below compares D3.js with jQuery and JavaScript to make the differences easier to understand.

Selector D3.js jQuery Javascript
Tag d3.select("p");, d3.selectAll("p"); $("p"); document.getElementsByTagName("p");
ID d3.select("#id"); $("#id"); document.getElementById("id");
Class d3.select(".cls");, d3.selectAll(".cls"); $(".cls"); document.getElementsByClassName("cls");

You can identify elements by writing selectors with method chaining as follows:

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

Manipulating selected tags

The following table shows how to manipulate tags in a selected object.

As with tag selection, the table compares D3.js with jQuery and JavaScript.

Action d3 jQuery Javascript
Get attribute selection.attr("id"); selection.attr("id"); selection.getAttribute("id");`
Add attribute selection.attr("id", "name"); selection.attr("id", "name"); selection.attrAttribute("id", "name");
Remove attribute selection.attr("id", null); selection.removeAttr("id"); selection.removeAttribute("id");
Add class selection.classed("cls", true); selection.addClass("cls"); selection.classList.add("cls");
Remove class selection.classed("cls", false); selection.removeClass("cls"); selection.classList.remove("cls");
Get style selection.style("color"); selection.css("color"); selection.style.color;
Set style selection.style("color", "blue"); selection.css("color", "blue"); selection.style.color = "blue";
Remove style selection.style("color", null); selection.css("color", ""); selection.style.color = "";
Get property value selection.property("checked"); selection.prop("checked"); selection.checked;
Set property value selection.property("checked", true); selection.prop("checked", true); selection.checked = true;
Get HTML selection.html(); selection.html(); selection.innerHTML;
Set HTML selection.html("<p>value</p>"); selection.html("<p>value</p>"); selection.innerHTML = "<p>value</p>";
Add element selection.append("p"); selection.append("<p></p>"); selection.appendChild(document.createElement('div'));
Remove element selection.remove(); selection.remove(); selection.parentNode.removeChild(selection);

Basic Select usage

First, create the following HTML as an example.

<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()

Use the select() method to select the first matched DOM element and set its style.

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

selectAll()

Use the selectAll() method to select all matched DOM elements and set their style.

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

append()

You can also add elements with the append() method.

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

Function argument of style()

Use a function object instead of a fixed value as the second argument of style to set styles dynamically. The function object receives data, explained again later, and index, the order of the matched element, as arguments.

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

data()

Use data() to assign data to each matched element. The assigned data is passed as the first argument to functions passed to methods such as style. The part where the number of DOM elements corresponds to the number of data items is called the update selection.

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

References