DOM Manipulation Using D3.js

d3js

D3 (Data-Driven Documents or D3.js) is a JavaScript library for visualizing data using web standards. It is an open-source JavaScript library developed by Mike Bostock to create custom interactive data visualizations in the web browser using SVG, HTML, and CSS. giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

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.

dom1

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.

select():
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.

select

selectAll():
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.

SelectAllnew

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.

text

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.

append

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.

Insert

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:

selectAll

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.

html

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.

attr

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:

remove

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.

classed

Thanks For Reading.!!!!

knoldus-advt-sticker

 

Written by 

Nitin Arora is Software Consultant at Knoldus Software LLP with 6 months of experience. He has done MCA from Banarsidas Chandiwala Institute of Information technology, Delhi(GGSIPU). He has a graduation degree in BCA from Jamia Hamdard. He has a sound knowledge of various programming languages like C, C++, Java, and scala. Also has a deep interest in frontend development like Html, CSS, Angular, Javascript. He is currently working in frontend technologies like Angular, Html, CSS, Bootstrap and Typescript. He is focused, hardworking, team-oriented member and always exploring new Technologies, His hobbies is to play cricket, volleyball, and do coding.

Leave a Reply

%d bloggers like this: