Open In App

D3.js nest.map() Function

Improve
Improve
Like Article
Like
Save
Share
Report

nest.map() function in D3.js is used to form a nested map. The map contains a key-value pair determined by the key function which was executed very first. If no keys are declared or defined than map function returns the original array as it is.

Syntax:

nest.map(array)

    Parameters:

  • It takes the collection array as the input.

Return:

Below are a few examples of the above function

Example 1:

When keys are defined.




<!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>
  .originalColor{
    height: 100px;
    width: 100px;
  }
  .darkerColor{
    height: 100px;
    width: 100px;
  }
</style>
<body>
    
  <!-- Fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src
   </script>
  <script>
    // Forming the collection
    let coll=[
      {val:"val10", data:"data11"},
      {val:"val20", data:"data22"},
      {val:"val30", data:"data33"},
      {val:"val40", data:"data44"}
    ]
    let data= d3.nest()
                .key(function(d) {
      return d.val; })
                .map(coll)
    // Logging the data
    console.log(data);
  </script>
</body>
</html>


Output:

Example 2:

When no keys are defined.




<!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>
  .originalColor{
    height: 100px;
    width: 100px;
  }
  .darkerColor{
    height: 100px;
    width: 100px;
  }
</style>
<body>
    
  <!--fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js">
  </script>
  <script>
    let collection=[
      {val:"val10", data:"data11"},
      {val:"val20", data:"data22"},
    ]
    //no keys are defined
    let data= d3.nest()
                .map(collection)
    console.log(data);
  </script>
</body>
</html>


Output:



Last Updated : 19 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads