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)
- It takes the collection array as the input.
Parameters:
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" </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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen 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!
