D3.js selection.filter()函数

d3.js 中的d3.selection.filter()函数用于过滤给定的选择并返回过滤器为真的新选择。要使用的过滤器可以是字符串或函数。

句法：

selection.filter(filter);

参数：此函数接受一个如上所述和如下所述的参数：

• filter：它是一个字符串或函数，用于过滤选择。使用函数时，过滤器将应用于每个选定的元素。

返回值：此函数返回新的选择。

示例 1：此示例选择指定元素的所有奇数子元素。

HTML

  

    
    
      
    
    
    
    

  

    
        1. This text is in bold
        2. This text is also in bold
        3. Geeks for geeks
        4. Geeks for geeks
        5. Geeks for geeks
    
     
    
        let selection = d3.selectAll("b")
            .filter(":nth-child(odd)")
            .nodes();
        selection.forEach((e) => {
            console.log(e.textContent)
        })
    

  

输出：

示例 2：此示例选择指定元素的所有偶数子元素。

HTML

  

    
    
    
    
    
    

  

    
        1. This text is in bold
        2. This text is also in bold
        3. Geeks
        4. Geeks
        5. Geeks for geeks
    
      
    
        let selection = d3.selectAll("b")
            .filter(":nth-child(even)")
            .nodes();
        selection.forEach((e) => {
            console.log(e.textContent)
        })
    

  

输出：

示例 3：此示例使用 selection.selectAll 作为过滤器。

HTML

  

    
    
  
    
    
    
    

  

    
        1. This text is in bold
        2. This text is also in bold
        3. Geeks
        4. Geeks
        5. Geeks for geeks
    
      
    
  
        // Using selection.selectAll with filter
        let selection = d3.selectAll("div")
            .selectAll("h3")
            .filter(":nth-child(even)")
            .nodes();
        selection.forEach((e) => {
            console.log(e.textContent)
        })
    

  

输出：