DOM Manipulation in D3.js
A review of how to perform DOM manipulation with the D3.js library from within your HTML code.
by
·
Join the DZone community and get the full member experience.
Join For Free
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"></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!
Opinions expressed by DZone contributors are their own.
Comments