nest.key() function in D3.js is used to register a new key function which is invoked for each element in the input array. Whenever a new key is registered, it is then pushed in the array to the end.
Syntax:
nest.keys(key)
Parameters:
- It takes only one parameter i.e the key function.
Return: It returns a string identifier.
Below given are few examples that explain the function in a better way.
Example 1:
<!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>     let collection=[       {val:"val1"},       {val:"val2"},       {val:"val3"},       {val:"val4"}     ]     let data=d3.nest().key((d)=>{return d.val})                       .entries(collection)     console.log(data);   </script> </body> </html> |
Output:
Example 2:
<!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>     let collection=[       {val:"val1", data:"data1", anotherData:"data1"},       {val:"val2", data:"data2", anotherData:"data2"},       {val:"val3", data:"data3", anotherData:"data3"},       {val:"val4", data:"data4", anotherData:"data4"}     ]     //key is added     let data=d3.nest().key((d)=>{return d.val})                       //another key is nested and added                       .key((d)=>{return d.data})                       //another key is added and nested                       .key((d)=>{return d.anotherData})                       .entries(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!
… [Trackback]
[…] Info to that Topic: geeksforgeeks.org/d3-js-nest-key-function/ […]