D3.js selection.select() Function

Last Updated : 21 Nov, 2021

The selection.select() function in d3.js is used to select the first descendant element that matches the given selector. If the element is not found then null is returned by the function.

Syntax:

 selection.select(selector);

Parameters: The above-given function takes only one parameter which is given above and described below:

selector: This is the name of the HTML containers or SVG tag.

Return Values: It returns an element if found else null is returned.

Below given are a few examples of the function given above.

Example1:

html

<!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> 
div{
    background-color: green;
    margin-bottom: 5px;
    padding: 10px;
    width: fit-content;
}
</style> 
<body>  
    <div>Some text</div>
    <div><b>Geeks for geeks</b></div>
    <div>Geeks for geeks<b>This is from b tag</b></div>
    <div>Some text</div>
  <script src = 
"https://d3js.org/d3.v4.min.js"> 
  </script>
  <script src=
  "https://d3js.org/d3-selection.v1.min.js">
</script>
  <script>
      let selection=d3.selectAll("div").select("b").node()
      console.log(selection)
  </script> 
</body> 
</html>

Output:

Example 2: When element is not found null is returned.

html

<!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> 
div{
    background-color: green;
    margin-bottom: 5px;
    padding: 10px;
    width: fit-content;
}
</style> 
<body>  
    <div>Some text</div>
    <div><b>Geeks for geeks</b></div>
    <div>Geeks for geeks<b>This is from b tag</b></div>
    <div>Some text</div>
  <script src = 
"https://d3js.org/d3.v4.min.js"> 
  </script>
  <script src=
  "https://d3js.org/d3-selection.v1.min.js">
</script>
  <script>
      let selection=d3.selectAll("div").select("p");
      console.log(selection.nodes());
      console.log(selection.node());
  </script> 
</body> 
</html>