d3.js matcher()用法及代碼示例

d3.js中的d3.matcher()函數用於返回根據元素而返回true或false的函數。如果元素匹配，則返回true，否則返回false。

用法:

d3.matcher(selector);

參數：above-given函數僅采用上麵給出並在下麵描述的一個參數：

selector:選擇器是要匹配的HTML標記的名稱。

返回值：該函數返回一個返回布爾值的函數。

下麵給出的是上麵給出的函數的一些例子。

範例1：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport"
            path1tent="width=device-width,  
                    initial-scale=1.0">  
    <title>Document</title>  
</head>  
<style> 
    h5{ 
        line-height:5px; 
    } 
</style>  
<body>   
    <div> 
  
    </div> 
    <div> 
        <h5>This is text1</h5> 
        <h5>This is text2</h5> 
        <h5>This is text3</h5> 
        <h5>This is text4</h5> 
    </div> 
  <script src =  
"https://d3js.org/d3.v4.min.js">  
  </script> 
  <script> 
    var heading= d3.selectAll("h5"); 
    var matcher=heading.filter(d3.matcher("h5")) 
                       .node(); 
    var filter=heading.filter(d3.matcher("h5")) 
                      .node(); 
    console.log(matcher); 
    console.log(filter); 
  </script>  
</body>  
</html>

輸出：

範例2：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport"
            path1tent="width=device-width,  
                    initial-scale=1.0">  
    <title>Document</title>  
</head>  
<style> 
    p{ 
        line-height:5px; 
    } 
</style>  
<body>   
    <div> 
  
    </div> 
    <div> 
        <p>This is text1</p> 
        <p>This is text2</p> 
        <p>This is text3</p> 
        <p>This is text4</p> 
    </div> 
  <script src =  
"https://d3js.org/d3.v4.min.js">  
  </script> 
</script> 
  <script> 
    var heading= d3.selectAll("p"); 
    var matcher=heading.filter(d3.matcher("p")) 
                       .nodes(); 
    var filter=heading.filter(d3.matcher("p")) 
                      .nodes(); 
    // Matcher and filter are same and equal 
    console.log(matcher); 
    console.log(filter); 
    // Matcher and filter are same and equal so it returns true 
    console.log(matcher[0]==filter[0]) 
  </script>  
</body>  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 D3.js matcher() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。