D3.js selection.merge() Function - GeeksforGeeks

23 Aug, 2020
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 src="https://d3js.org/d3.v4.min.js">    </script>    <script src=        "https://d3js.org/d3-selection.v1.min.js">    </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 src="https://d3js.org/d3.v4.min.js">    </script>    <script src=        "https://d3js.org/d3-selection.v1.min.js">    </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:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to filter object array based on attributes?
How to get selected value in dropdown list using JavaScript ?
How to remove duplicate elements from JavaScript Array ?
Installation of Node.js on Linux
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?