dom manipulation using d3js

D3.js provides a number of methods for manipulating DOM elements using JavaScript. Here are some of the most commonly used methods:

1. d3.select() - Selects the first matching element in the DOM and returns a selection object.

d3.select("body").style("background-color", "lightblue");

In this example, we are selecting the body element and setting its background color to light blue.

2. d3.selectAll() - Selects all matching elements in the DOM and returns a selection object.

d3.selectAll("p").style("color", "red");

In this example, we are selecting all the paragraph elements and setting their color to red.

3. selection.attr() - Sets or gets an attribute on the selected element(s).

d3.select("img").attr("src", "image.jpg");

In this example, we are selecting the image element and setting its source attribute to image.jpg.

4. selection.style() - Sets or gets a style property on the selected element(s).

d3.select("div").style("background-color", "gray");

In this example, we are selecting a div element and setting its background color to gray.

5. selection.text() - Sets or gets the text content of the selected element(s).

d3.select("h1").text("Hello, D3.js!");

In this example, we are selecting an h1 element and setting its text content to "Hello, D3.js!".

6. selection.html() - Sets or gets the HTML content of the selected element(s).

d3.select("div").html("<p>Hello, World!</p>");

In this example, we are selecting a div element and setting its HTML content to a paragraph with the text "Hello, World!".