D3.js selection.insert() Function

0 0 2 minutes read

The selection.insert() function is used to append a new element of the given type at the specified position. It inserts a new element before the selector for each selected element.

Syntax:

selection.insert(type[, before]);

Parameters: This function takes two parameters which are given above and described below:

type: It is a string that defines the type of element.
before: It is a string that defines an element before which a new element is inserted.

Return Values: This function must return the child element before which the new element is inserted.

Example 1: When elements are inserted before all elements in the selection.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" path1tent= 
        "width=device-width, initial-scale=1.0"> 
  
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
  
    <style> 
        h1 { 
            color: green; 
        } 
  
        p { 
            background-color: #f2f2f2; 
            padding: 10px; 
            width: 300px; 
            line-height: 5px; 
        } 
  
        p:hover { 
            background-color: grey; 
            padding: 10px; 
            cursor: pointer; 
        } 
  
        div { 
            height: 50px; 
            background-color: green; 
            margin: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>zambiatek</h1> 
  
    <h4>D3.js selection.insert() Function</h4> 
  
    <span> 
        Div will be inserted before "Click Here!" 
    </span> 
    <p id="p"><b>Click Here!</b></p> 
  
    <script> 
        function func() { 
            // Selecting all p and appending a DIV 
            // before the b tag to each p tag 
            var chk = d3.selectAll("p") 
                .insert("div", "b"); 
        } 
        clickme = document.getElementById("p"); 
        clickme.addEventListener("click", func); 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the click “Click Here” element:

Example 2: When elements are inserted before first elements in the selection.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" path1tent= 
        "width=device-width, initial-scale=1.0"> 
                      
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
  
    <style> 
        h1 { 
            color: green; 
        } 
  
        div { 
            width: 300px; 
            color: #ffffff; 
            height: 50px; 
            background-color: green; 
            margin: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>zambiatek</h1> 
  
    <h4>D3.js selection.insert() Function</h4> 
  
    <div><span>Click Here!</span></div> 
  
    <script> 
        function func() { 
            // Selecting div and Inserting  
            // <b> tag before <span> tag 
            var div = d3.select("div") 
                .insert("b", "span"); 
            var b = document.querySelector("b"); 
            b.innerText = "This <b> tag is appended. "; 
        } 
        btn = document.querySelector("div"); 
        btn.addEventListener("click", func); 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the “Click Here” element:

After clicking the “Click Here” element:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!