Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • D3.js - Get Started
  • What is D3.js
  • Web Standards
  • D3 - Environment Setup
  • D3 - DOM Selection
  • D3 - DOM Manipulation
  • D3 - Method Chaining
  • D3 - Function of Data
  • D3 - Event Handling
  • D3 - Animation
  • D3 - Data Binding
  • D3 - Data Loading
  • D3 - Create SVG Elements
  • D3 - Create SVG Chart
  • D3 - Scales
  • D3 - Axes
  • D3 - Bar Chart
  • D3 - Animated Bar Chart
  • D3 - Pie Chart
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

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().

MethodDescription
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 <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
<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<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
<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 <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
<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 <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
<p>First paragraph</p>
<p>Second paragraph</p>

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

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
<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 <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
<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 <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
<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<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
<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 <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.

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.