D3.js selection.size() Function

0 0 1 minute read

The selection.size() function in D3.js is used to calculate and return the size of the selection. It counts the total element in the selection and returns its size.

Syntax:

selection.size();

Parameters: This function does not accept any parameters.

Return Value: This function returns a Numerical value.

Example 1: When selection is non-empty.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" path1tent= 
        "width=device-width,initial-scale=1.0"> 
    <script src= 
        "https://d3js.org/d3.v4.min.js"> 
    </script> 
    <script src= 
"https://d3js.org/d3-selection.v1.min.js"> 
    </script> 
</head> 
  
<body> 
    <div>Geeks for Geeks </div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
  
    <script> 
        let selection = d3.selectAll("div") 
        let div = selection.size(); 
        console.log(div) 
    </script> 
</body> 
  
</html> 

Output:

Example 2: When selection is empty.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" path1tent= 
        "width=device-width,initial-scale=1.0"> 
    <script src= 
        "https://d3js.org/d3.v4.min.js"> 
    </script> 
    <script src= 
"https://d3js.org/d3-selection.v1.min.js"> 
    </script> 
</head> 
  
<body> 
    <script> 
        let selection=d3.selectAll("h2") 
        let size=selection.size(); 
        console.log(size) 
      </script>  
</body> 
  
</html> 

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!