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.

Example: Add Text to DOM Element
<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <div>
        <p></p>
    </div>
    <p></p>
    <script>
        d3.select("p").text("This is paragraph.")
    </script>
</body>
</html>

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.

Example: Append New Element
<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <p>First paragraph</p>
    <p>Second paragraph</p>

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

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.

Example: Append New Element
<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <p>First paragraph</p>
    <p>Second paragraph</p>

    <script>
        d3.select("body").append("p").text("Third paragraph.");
    </script>
</body>
</html>

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.

Example: Insert New Element
<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <div>
        <p>First paragraph.</p>
    </div>
    <script>
        d3.select("div").insert("p").text("Second paragraph.");
    </script>
</body>
</html>

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.

Example: Delete Elements
<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <script>
        d3.select("p").remove();
    </script>
</body>
</html>

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.

Example: Set innerHTML
<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <p>First paragraph</p>
    <script>
        d3.select("p").html("<span>This was added in HTML</span>");
    </script>
</body>
</html>

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.

Example: Set Attribute
<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        .error {
            color: red
        }
    </style>
</head>
<body>
    <p>Error: This is dummy error.</p>
    <script>
        d3.select("p").attr("class","error");
    </script>
</body>
</html>

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.

Example: Set Property
<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <p>D3</label><input type="checkbox" />
    <p>jQuery</label><input type="checkbox" />
<script>
    d3.select("input").property("checked",true);
</script>
</body>
</html>

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.

Example: Set Style Attribute
<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <p>Error: This is dummy error.</p>
    <script>
        d3.select("p").style("color", "red")
    </script>
</body>
</html>

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.

Example: Set CSS class
<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        .error {
            color: 'red'
        }
    </style>
</head>
<body>

    <p>Error:</p>

    <script>
        d3.select("p").classed('error', true);
    </script>
</body>
</html>

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('myclass', 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.