D3.js selection.clone() Function
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 >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:
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 >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:
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 >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:
Last Updated :
03 Sep, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...