Skip to content
Related Articles

Related Articles

Improve Article

D3.js selection.merge() Function

  • Last Updated : 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=
    </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=
    </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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :