La función nest.map() en D3.js se usa para formar un mapa anidado. El mapa contiene un par clave-valor determinado por la función clave que se ejecutó primero. Si no se declaran o definen claves, la función de mapa devuelve la array original tal como está.
Sintaxis:
nest.map(array)
- Toma la array de colección como entrada.
Parámetros:
Devolver:
A continuación se muestran algunos ejemplos de la función anterior.
Ejemplo 1:
Cuando se definen las claves.
<!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> // 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>
Producción:
Ejemplo 2:
Cuando no hay claves definidas.
<!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>
Producción: