Open In App

D3.js selection.clone() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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>GeeksforGeeks</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>GeeksforGeeks</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>GeeksforGeeks</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:



Last Updated : 03 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads