D3.js nest.entries() function

0 0 1 minute read

The nest.entries() function in D3.js is used to generate the nest and is applies a nest operator to every level of hierarchy rather than the outmost layer only.

Syntax:

nest.entries(array)

Parameters: It takes only one parameter given above and described below.

Array: It is the array of objects.

Return Value: It returns the array of key-value entries.

Below given are a few examples of the above function.

Example 1: When no entries function is used and keys are assigned.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport"
        content="width=device-width, 
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
</style> 
<body> 
  <!-- Fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js"> 
  </script> 
  <script> 
    // Forming the array of objects 
    let array=[ 
      {val:"val10", data:"data11"}, 
      {val:"val20", data:"data22"}, 
      {val:"val30", data:"data33"}, 
      {val:"val30", data:"data33"}, 
      {val:"val30", data:"data33"}, 
      {val:"val50", data:"data33"}, 
      {val:"val40", data:"data44"} 
    ] 
    let data= d3.nest() 
                  .key(function(d) { return d.val; }) 
    console.log(data); 
  </script> 
</body> 
</html>

Output:

Example 2: When entries function is used with the nest.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width, 
                       initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
</style> 
<body> 
  <!-- Fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js"> 
 </script> 
  <script> 
    // Forming the array of objects 
    let array=[ 
      {val:"val10", data:"data11"}, 
      {val:"val20", data:"data22"}, 
      {val:"val30", data:"data33"}, 
      {val:"val30", data:"data33"}, 
      {val:"val30", data:"data33"}, 
      {val:"val50", data:"data33"}, 
      {val:"val40", data:"data44"} 
    ] 
    let data= d3.nest() 
                  .key(function(d) { return d.val; }) 
                  .entries(array) 
    console.log("Type is: ", typeof array) 
    console.log(data); 
  </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!