DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. JavaScript
  4. DOM Manipulation in D3.js

DOM Manipulation in D3.js

A review of how to perform DOM manipulation with the D3.js library from within your HTML code.

Nitin Arora user avatar by
Nitin Arora
·
Dec. 07, 18 · Tutorial
Like (3)
Save
Tweet
Share
11.56K Views

Join the DZone community and get the full member experience.

Join For Free

Image title

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.

Here, first, we need to import D3 library d3.min.js into our HTML page.

<head>
<script src="https://d3js.org/d3.v4.min.js"&#62;</script>
</head>

We can manipulate elements of the DOM, 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 a specified CSS selector.

Example: In the below example, we will select the first <p> element and the style method change its color attribute to red.

<body>
<p>select first element</p>
<p>select second element</p>
<script>
d3.select("p").style("color", "red");
</script>
</body>

selectAll():

d3.selectAll(CSS-selector), this method returns all the matching elements of the HTML element on the basis of specified CSS selector.

Example: In the below example, we will select all the <p> element and the style method will change the color attribute of all the selected elements of the HTML document.

<body>
<p>selectAll Demo1</p>
<p>selectAll Demo2</p>
<script>
d3.selectAll("p").style("color", "green");
</script>
</body>

Note: We can also use these methods to select an element using its ID. 

1: text(): We can easily make changes to the content of the HTML document and also adde content using the 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 the text method shown below.

<body>
<div>
<p></p>
</div>
<script>
d3.select("p").text("Add content using text method.");
</script>
</body>

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.

<body>
<p>Learning append method.</p>
<script>
d3.select("body").append("p");
</script>
</body>

3: Insert(): the insert method is used to create an element and insert it into the selected elements before the ending tag of the selected elements.

Syntax: insert(“element name”), inserts 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.

<body> <div>
<p> Learning insert method.</p>
</div>
<script>
d3.select("div").insert("p").text("insert <p> inside the <div> tag");
</script>
</body>

4. style(): The  style()method makes use of the style attribute with the name and value pair and applied on the selected elements.

Syntax: style(“name”, “value”) takes a name and its value to set the style on selected elements.

Example: In this example, we select the <p> element and then styling the elements using the style method like shown below:

<body>
<p>Implementing style method</p>
<script>
d3.select("p").style("color", “green”)
</script>
</body>

5: html(): This method sets 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.

<body>
<p>How to use html method in d3.js</p>
<script>
d3.select("p").html("<span>replace p tag with this tag.</span>");
</script>
</body>

6: attr(): We can get and set the attribute of the selected element in the DOM using this method.

Syntax: attr(“name”: “value”), as the syntax described it deals with the name and value pair.

Example:

<head>
<style>
	.change-attribute {
		color: blue;
		font-weight: bold;
	}
</style>
</head>
<body>
<p>Learning attribute.</p>
<script>
	d3.select("p").attr("class","change-attribute");
</script>
</body>

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.

In the below example, we remove the selected element:

<body>
<h1>Learning remove method</h2>
<p>remove this tag</p>
<script>
	d3.select("p").remove();
</script>
</body>

8: classed(): Using this method we can easily add or remove CSS classes on the selected elements. We can also modify the classList property to the selected elements.

Syntax: classed(“CSS class”, bool), can add or remove the class from the selection.

The below example shows how we can add the class named change-attribute. Here we select the <p> 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.

<head>
<style>
	.change-attribute {
		color: blue;
		font-weight: bold;
	}
</style>
</head>
<body>
<p>Error:</p>
<script>
	d3.select("p").classed('change-attribute', true);
</script>
</body>

Thanks for reading!

Element D3.js

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Upgrade Guide To Spring Data Elasticsearch 5.0
  • What Was the Question Again, ChatGPT?
  • Mr. Over, the Engineer [Comic]
  • 5 Factors When Selecting a Database

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: