D3 DOM element manipulation

For DOM manipulation, first of all we need to get reference to the DOM element. Below are the two methods used mainly

d3.select(css-selector) => Returns the first matching element in the HTML document based on specified css-selector
d3.selectAll(css-selector) => Returns all the matching elements in the HTML document based on specified css-selector

e.g below

First paragraph
Second paragraph



Another way to select by ID, and is like d3.select("#p2")


Calling selectAll() method immediately after select() method is called Method Chaining. E.g like below

d3.select("tr").selectAll("td").style('background-color','yellow');

Below are the main Dom manipulation methods

text("content") => Gets or sets the text of the selected element
append("element name") => Adds an element inside the selected element but just before the end of the selected element.
insert("element name") => Inserts a new element in the selected element
remove() => Removes the specified element from the DOM
html("content") => Gets or sets the inner HTML of selected element
attr("name", "value") => Gets or sets an attribute on the selected element.
property("name", "value") => Gets or sets an attribute on the selected element.
style("name", "value") => Gets or sets the style of the selected element
classed("css class", bool) => Gets, adds or removes a css class from the selection



References:
https://www.tutorialsteacher.com/d3js/select-dom-element-using-d3js