DOM Manipulation using D3
In the previous section, we learned how to select DOM elements using D3. In this section, we will learn how to modify DOM elements.
D3 includes the following DOM manipulation methods that you can use after selecting elements using d3.select() or d3.selectAll().
| Method | Description |
|---|---|
| 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 |
text()
Use d3.selection.text() method to add or modify text content of selected elements.
<div>
<p></p>
</div>
<p></p>
<script>
d3.select("p").text("This is paragraph.")
</script>In the above example, we select the first matching <p> element which is inside <div> using d3.select("p"). After the<p> element is selected, .text("This is paragraph.") adds "This is paragraph" text to the selected paragraph element.
Please notice that we have used d3.select() method, so it will only add text into the first matching element. If we use d3.selectAll() method then it will add text to all <p> elements.
append()
Use d3.selection.append() method to create a new DOM element and add it at the end of selected DOM element.
<p>First paragraph</p>
<p>Second paragraph</p>
<script>
d3.select("body").append("p");
</script>In the above example, d3.select("body") returns the body element and .append("p") creates a new<p> element and adds it just before the end of the <body>. Open the developer console and see new empty <p> element. You can add text to the new element using text() method as shown below.
<p>First paragraph</p>
<p>Second paragraph</p>
<script>
d3.select("body").append("p").text("Third paragraph.");
</script>In the above example, D3 creates a new <p> element with text "Third paragraph." and adds it before the ending body tag </body>
insert()
Use d3.selection.insert() method to create a new element and insert it into the selected element before its ending tag.
<div style={{Border: '1px solid'}} >
<p>First paragraph.</p>
</div>
<script>
d3.select("div").insert("p").text("Second paragraph.");
</script>In the above example, d3.select("div") selects div element. Then, .insert("p") creates new <p> element and adds it just before the end of the div tag. The insert("Second paragraph.") sets the text of inserted <p> element.
remove()
Use d3.selection.remove() method to delete selected DOM elements.
<p>First paragraph</p>
<p>Second paragraph</p>
<script>
d3.select("p").remove();
</script>In the above example, we had two <p> elements to begin with, d3.select("p") returns first <p> element and .remove() deletes it from the document.
html()
The d3.selection.html() method sets inner html of selected elements.
<p>First paragraph</p>
<script>
d3.select("p").html("<span>This is new inner html.</span>");
</script>In the above example, d3.select("p") selects the paragraph element. .html("This was added in HTML") replaces the inner html of the selected <p> element. So, the original HTML 'First paragraph' was replaced with "<span>This was added in HTML</span>".
attr()
Use d3.selection.attr() method to apply attributes on the selected DOM elements.
<style>
.error {
color: red
}
</style>
<body>
<p>Error: This is dummy error.</p>
<script>
d3.select("p").attr("class","error");
</script>
</body>In the above example, d3.select("p") selects the <p> element and .attr("class","error")applies class attribute to the paragraph element. You can use attr() method to set any valid attribute to any selected DOM element.
property()
Attributes of some elements cannot be set by attr() method such as, checked property of checkbox or radio button. In this case, use property() method to apply attributes on the selected DOM elements.
<p>D3</label><input type="checkbox" />
<p>jQuery</label><input type="checkbox" />
<script>
d3.select("input").property("checked",true);
</script>In the above example, d3.select("input") selects the first <input> element and .property("checked",true)applies checked attribute to the checkbox element.
style()
Use d3.selection.style() method to apply style attribute with the specified name and value to the selected elements.
<p>Error: This is dummy error.</p>
<script>
d3.select("p").style("color", "red")
</script>The style() method can be used to add styles to the selection. In this example, d3.select("p") selects the<p> element, then the style("color", "red") adds a font-color red to the <p> element.
classed()
Use d3.selection.classed() method to set class attribute or modify classList property to the selected elements.
<style>
.error {
color: red
}
</style>
<body>
<p>This is error.</p>
<script>
d3.select("p").classed('error', true);
</script>
</body>We can use the classed method to apply or remove css classes to our selections. In this example, d3.select("p") selects the <p>element and then classed('error', true) applies the class error to the selected <p> element. The second attribute in the classed method is a boolean. If passed true, it adds the class to the selected element and if false, it removes the class from the selected element.