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

<div>
    <p></p>
</div>
<p></p>
<script>
    d3.select("p").text("This is paragraph.")
</script>

Try it

In the above example, we select the first matching  element which is inside <div> using d3.select("p"). After the  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  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

<p>First paragraph</p>
<p>Second paragraph</p>

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

Try it

In the above example, d3.select("body") returns the body element and .append("p") creates a new  element and adds it just before the end of the <body>. Open the developer console and see new empty  element. You can add text to the new element using text() method as shown below.

Example: Append New Element
<p>First paragraph</p>
<p>Second paragraph</p>

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

In the above example, D3 creates a new  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
<div style="border:1px solid" >
    <p>First paragraph.</p>
</div>

<script>
    d3.select("div").insert("p").text("Second paragraph.");
</script>Try it

In the above example, d3.select("div") selects div element. Then, .insert("p") creates new  element and adds it just before the end of the div tag. The insert("Second paragraph.") sets the text of inserted  element.

remove()

Use d3.selection.remove() method to delete selected DOM elements.

Example: Delete Elements

<p>First paragraph</p>
<p>Second paragraph</p>

<script>
    d3.select("p").remove();
</script>

Try it

In the above example, we had two elements to begin with, d3.select("p") returns first  element and .remove() deletes it from the document.

html()

The d3.selection.html() method sets inner html of selected elements.

Example: Set innerHTML

<p>First paragraph</p>
<script>
    d3.select("p").html("<span>This is new inner html.</span>");
</script>

Try it

In the above example, d3.select("p") selects the paragraph element. .html("This was added in HTML ") replaces the inner html of the selected  element. So, the original HTML 'First paragraph' was replaced with "This was added in HTML".

attr()

Use d3.selection.attr() method to apply attributes on the selected DOM elements.

Example: Set Attribute
<style>
    .error {
        color: red
    }
</style>
<body>
    <p>Error: This is dummy error.</p>
    <script>
        d3.select("p").attr("class","error");
    </script>
</body>
Try it

In the above example, d3.select("p") selects the  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

<p>D3</label><input type="checkbox" />
<p>jQuery</label><input type="checkbox" />

<script>
    d3.select("input").property("checked",true);
</script>

Try it

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
<p>Error: This is dummy error.</p>
<script>
    d3.select("p").style("color", "red")
</script>
Try it

The style() method can be used to add styles to the selection. In this example, d3.select("p") selects the  element, then the style("color", "red") adds a font-color red to the  element.

classed()

Use d3.selection.classed() method to set class attribute or modify classList property to the selected elements.

Example: Set CSS class
<style>
    .error {
        color: red
    }
</style>
<body>
    <p>This is error.</p>

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

We can use the classed method to apply or remove css classes to our selections. In this example, d3.select("p") selects the  element and then classed('error', true) applies the class error to the selected  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.