D3.js selection.merge()函数

d3.js 中的selection.merge()函数用于将两个给定的选择合并为一个，并在合并后返回新的选择。返回的选择与此选择具有相同数量的组和相同的父项。

句法：

selection.merge(other);

参数：此函数接受描述要合并的选择的其他单个参数。

返回值：此函数返回一个选择。

示例 1：

HTML

  

    
    
    
    
    
    

  

    
        1. This text is in bold
        2. This text is also in bold
        3. Geeks
        4. Geeks
        5. Geeks for geeks
    
  
    
        // 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);
        });
    

  

输出：

示例 2：

HTML

  

    
    
  
    
    
    
    

  

    
        1. This is odd
        2. This is even
        3. This is odd
        4. This is even
        5. This is odd
    
  
    
        // 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);
        });
    

  

输出：