Skip to content
Related Articles

Related Articles

D3.js selection.clone() Function
  • Last Updated : 03 Sep, 2020
GeeksforGeeks - Summer Carnival Banner

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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :