D3.js selection.clone() Function

0 0 2 minutes read

The selection.clone() function is used to clone the selected elements and inserts these clones immediately after the same elements.

Syntax:

selection.clone([deep]);

Parameters: This function accepts single parameters as mentioned above and described below:

deep: If deep is true the descendant nodes will also be cloned.

Return Value: This function returns the clone of the element to be inserted.

Below examples illustrate the selection.clone() function in D3.js:

Example 1: When all the div are effected 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:hover { 
            background-color: grey; 
            cursor: pointer; 
        } 
  
        div { 
            width: 300px; 
            color: #ffffff; 
            height: 50px; 
            background-color: green; 
            margin: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>zambiatek</h1> 
    <div><span>1. Some text</span></div> 
    <div><span>2. Some text</span></div> 
  
    <button>Click Here!</button> 
  
    <script> 
        function func() { 
            // Selecting div and 
            // Cloning the div and 
            // Adding html to it 
            var div = d3.selectAll("div") 
                .clone() 
                .html("<span>I am cloned.</span>"); 
            console.log(div); 
  
            var b = document.querySelector("b"); 
            b.innerText = "This <b> tag is appended. " 
        } 
        let btn = document.querySelector("button"); 
        btn.addEventListener("click", func); 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

Example 2: When only one div is effected 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:hover { 
            background-color: grey; 
            cursor: pointer; 
        } 
  
        div { 
            width: 300px; 
            color: #ffffff; 
            height: 50px; 
            background-color: green; 
            margin: 10px; 
        } 
    </style> 
  
<body> 
    <h1>zambiatek</h1> 
    <div><span> 
        1. Only this div is cloned. 
    </span></div> 
    <div><span> 
        2. This div will not be cloned. 
    </span></div> 
      
    <button>Click Here!</button> 
  
    <script> 
        function func() { 
            // Selecting div and 
            // Cloning the divs 
            // Adding html to cloned divs 
  
            var div = d3.select("div") 
                .clone() 
                .html("<span>I am cloned.</span>"); 
            console.log(div); 
            var b = document.querySelector("b"); 
            b.innerText = "This <b> tag is appended. " 
        } 
        let btn = document.querySelector("button"); 
        btn.addEventListener("click", func); 
  
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

Example 3: When deep is equal to true then all descendant elements are cloned.

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> 
  
    <p>Descendants will also be cloned.</p> 
  
  
    <p> 
        Here Descendants of div is span 
        that will be cloned. 
    </p> 
  
    <div><span>1. This div will be cloned.</span></div> 
    <div><span>2. This div will be cloned.</span></div> 
    <button>Click me</button> 
  
    <script> 
        function func() { 
  
            // Selecting div and Cloning the divs 
            // and its descendant elements 
            var div = d3.selectAll("div") 
                .clone([true]) 
            console.log(div); 
            var b = document.querySelector("b"); 
            b.innerText = "This <b> tag is appended. " 
        } 
        let btn = document.querySelector("button"); 
        btn.addEventListener("click", func); 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

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!