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> <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>neveropen</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> <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>neveropen</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> <style> h1 { color: green; } div { width: 300px; color: #ffffff; height: 50px; background-color: green; margin: 10px; } </style> </head> <body> <h1>neveropen</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, neveropen 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!
