Related Articles

Related Articles

D3.js selection.select() Function
  • Last Updated : 19 Aug, 2020

The selection.select() function in d3.js is used to select the first descendent 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
  </script>
  <script src=
</script>
  <script>
      let selection=d3.selectAll("div").select("b").node()
      console.log(selection)
  </script
</body
</html>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
  </script>
  <script src=
</script>
  <script>
      let selection=d3.selectAll("div").select("p");
      console.log(selection.nodes());
      console.log(selection.node());
  </script
</body
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :