The selection.merge() function in d3.js is used to merge the two given selections into one and return the new selection after merging them. The selection which is returned has the same number of groups and the same parents as this selection.
Syntax:
selection.merge(other);
Parameters: This function accepts single parameter other that describe selection is to be merged.
Return Values: This function returns a selection.
Example 1:
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" path1tent=" width = device -width,
initial-scale = 1 .0">
</ script >
< script src =
</ script >
</ head >
< body >
< div >
< h3 >1. This text is in bold</ h3 >
< h3 >2. This text is also in bold</ h3 >
< h3 >3. Geeks</ h3 >
< h3 >4. Geeks</ h3 >
< h3 >5. Geeks for geeks</ h3 >
</ div >
< script >
// Filtering odd children
const odd = d3.selectAll("h3")
.select(function (d, i) {
return i & 1 ? this : null;
});
// Filtering even children
const even = d3.selectAll("h3")
.select(function (d, i) {
return i & 1 ? null : this;
});
// Merging both selections
const merged = odd.merge(even).nodes();
// Printing text content
console.log(
"Collection after merging odd and even is:") merged.forEach((e) => {
console.log(e.textContent);
});
</ script >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" path1tent=" width = device -width,
initial-scale = 1 .0">
</ script >
< script src =
</ script >
</ head >
< body >
< div >
< h5 >1. This is odd</ h5 >
< h5 >2. This is even</ h5 >
< h5 >3. This is odd</ h5 >
< h5 >4. This is even</ h5 >
< h5 >5. This is odd</ h5 >
</ div >
< script >
// Filtering odd children
var even = d3.selectAll("h5")
.select(function (d, i) {
return i & 1 ? this : null
});
// Filtering even children
var odd = d3.selectAll("h5")
.select(function (d, i) {
return i & 1 ? null : this
});
// Merging both selections
const merged = odd.merge(even).nodes();
even = even.nodes();
odd = odd.nodes();
console.log("Odd selection: ")
odd.forEach((e) => {
console.log(e.textContent);
});
console.log("Even selection: ")
even.forEach((e) => {
console.log(e.textContent);
});
// Printing text content
console.log(
"Collection after merging odd and even is:") merged.forEach((e) => {
console.log(e.textContent);
});
</ script >
</ body >
</ html >
|
Output: