So let’s start with the example which explains how we can manipulate DOM using D3
Here initially first we need to import D3 library d3.min.js into our HTML page.
We can manipulate elements of DOM of the HTML document or that we first need to select a particular element, or a group of elements and then manipulate those elements using various D3 methods.
d3.select(CSS-selector), this method returns the first matching element of the selected HTML document on the basis of the specified CSS selector.
Example: In below example, we will select the first element and the style method change its color attribute to red.
d3.selectAll(CSS- selector),this method returns all the matching element of HTML element on the basis of specified CSS selector.
Example: In below example, we will select all the element and the style method will change the color attribute of all the selected element of the HTML document.
Note: D3 includes the following DOM manipulation methods that you can use after selecting elements using d3.select() or d3.selectAll().
1: text(): We can easily make changes to the content of the HTML document and also added content using text() method.
Syntax: text(“content”), this method will get or set the content of selected elements.
Example: In this example, we add the content in the <p> tag using text method shown below.
2: append(): The method is used to create a new DOM element and append it at the end of the selected DOM element.
Syntax: append(“selected element), this method adds the element just prior to the end of the selected element.
Example: Below example will add another element just before the end of the body tag.
3: Insert(): Insert method is used to create an element and insert into the selected elements before the ending tag of the selected elements.
Syntax: insert(“element name”), insert the new element in the selected element.
Example: In the below example we first select the <div> tag and then insert the newly created <p> tag.
4. style(): style() method makes use of style attribute with the name and value pair and applied on the selected elements.
Syntax: style(“name”, “value”), it takes the name and its value to set the style on selected elements.
Example: In this example, we select the element and then styling the elements using the style method like shown below:
5: html(): This method set the inner HTML of the selected elements.
Syntax: html(“content”), we can set the content of inner HTML and replace it with the selected element.
Example: Using the below code we select the element and using d3.select(“p”) we are replacing that content of an element with the content of an element.
6: attr(): we can get and set the attribute of the selected element in DOM using this method.
Syntax: attr(“name”: “value”), as the syntax described it deals with the name and value pair.
Example: In this example, we first select the <p> tag and change its attributes value using attr() method.
7: remove(): This method will remove the selected element from the DOM, for that we need to use d3.selection.remove() for deleting the selecting elements.
Syntax: remove(“element name”), specifies the name of the element to be removed.
Example: In this example, we remove the selected <p> element and removed that element from the dom as shown below:
8: classed(): Using this method we can easily add or remove CSS classes on the selected elements also we can modify the classList property to the selected elements.
Syntax: classed(“CSS class”, bool), we can add or remove the class from the selection.
Example: In below example shows how we can add the class named change-attribute. Here we select the elements and add the class by setting its boolean flag to true, and if you want to remove this class set its flag value to false.
Thanks For Reading.!!!!