D3.js: API de colecciones

Una colección es simplemente un objeto que agrupa múltiples elementos en una sola unidad. También se le llama como contenedor. Este capítulo explica en detalle la API de colecciones.

Configuración de API

Puede configurar la API utilizando el siguiente script.

<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script>

</script>

Métodos de API de colecciones

La API de colecciones contiene objetos, mapas, conjuntos y nidos. A continuación se muestran los métodos de API de colecciones más utilizados.

API de objetos
API de mapas
Establece API
API de nidos

Repasemos cada una de estas API en detalle.

API de objetos

La API de objetos es uno de los tipos de datos importantes. Es compatible con los siguientes métodos:

d3.keys(object) - Este método contiene las claves de propiedad del objeto y devuelve una matriz de los nombres de propiedad.
d3.values(object) - Este método contiene los valores del objeto y devuelve una matriz de valores de propiedad.
d3.entries(object)- Este método se utiliza para devolver una matriz que contiene tanto claves como valores del objeto especificado. Cada entrada es un objeto con una clave y un valor.

Example - Consideremos el siguiente código.

d3.entries({one: 1})

Aquí, la clave es uno y el valor es 1.

Example - Crea una página web objects.html y agregue los siguientes cambios.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = {"jan": 1, "Feb": 2, "mar": 3, "apr": 4};
         console.log(d3.keys(month));
         console.log(d3.values(month));
         console.log(d3.entries(month));
      </script>
   </body>
</html>

Ahora, solicite el navegador y verá la siguiente respuesta.

API de mapas

Un mapa contiene valores basados en pares de clave y valor. Cada par de clave y valor se conoce como entrada. Un mapa contiene solo claves únicas. Es útil buscar, actualizar o eliminar elementos basados en la clave. Veamos en detalle los distintos métodos de la API de Maps.

d3.map([object[, key]])- Este método se utiliza para crear un mapa nuevo. El objeto se utiliza para copiar todas las propiedades enumerables.
map.has(key) - Este método se utiliza para comprobar si el mapa tiene una entrada para la cadena de claves especificada.
map.get(key) - Este método se utiliza para devolver el valor de la cadena de claves especificada.
map.set(key, value)- Este método se utiliza para establecer el valor de la cadena de claves especificada. Si el mapa tenía anteriormente una entrada para la misma cadena de claves, la entrada anterior se reemplaza con el nuevo valor.
map.remove(key)- Se utiliza para eliminar la entrada del mapa. Si no se especifica la clave, devuelve falso.
map.clear() - Elimina todas las entradas de este mapa.
map.keys() - Devuelve una matriz de claves de cadena para cada entrada en este mapa.
map.values() - Devuelve una matriz de valores para cada entrada en este mapa.
map.entries() : Devuelve una matriz de objetos clave-valor para cada entrada en este mapa.
(x) map.each(function) - Este método se utiliza para llamar a la función especificada para cada entrada en el mapa.
(xi) map.empty() - Devuelve verdadero si y solo si este mapa tiene cero entradas.
(xii) map.size() - Devuelve el número de entradas en este mapa.

Example - Crea una página web maps.html y agregue los siguientes cambios.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = d3.map([{name: "jan"}, {name: "feb"}], 
            function(d) { return d.name; });
         console.log(month.get("jan")); // {"name": "jan"}
         console.log(month.get("apr")); // undefined
         console.log(month.has("feb")); // true
         
         var map =  d3.map().set("fruit", "mango");
         console.log(map.get("fruit")); // mango
         console.log(map.remove("fruit")); // remove key and return true.
         console.log(map.size());    // size is 0 because key removed.
         console.log(map.empty());   // true
      </script>
   </body>
</html>

Ahora, solicita el navegador y veremos la siguiente respuesta.

Del mismo modo, también puede realizar otras operaciones.

Establece API

Un conjunto es una colección que no puede contener elementos duplicados. Modela la abstracción matemática del conjunto. Repasemos en detalle los distintos métodos de la API de Sets.

d3.set([array[, accessor]])- Este método se utiliza para crear un nuevo conjunto. Array se usa para agregar valores de cadena. Un acceso es opcional.
set.has(value) - Este método se utiliza para verificar si el conjunto tiene una entrada para la cadena de valor especificada.
set.add(value) - Se utiliza para agregar la cadena de valor especificada al conjunto.
set.remove(value) - Se utiliza para eliminar el conjunto que contiene la cadena de valor especificada.
set.clear() - Elimina todos los valores de este conjunto.
set.values() - Este método se utiliza para devolver una matriz de valores al conjunto.
set.empty() - Devuelve verdadero si y solo si este conjunto tiene valores cero.
set.size() - Devuelve el número de valores de este conjunto.

Example - Crea una página web sets.html y agregue los siguientes cambios.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var fruits =  d3.set().add("mango")
          .add("apple").add("orange");
         console.log(fruits.has("grapes")); // return false.
         console.log(fruits.remove("apple")); //true
         console.log(fruits.size());    // size is 2
         console.log(fruits.empty());   // true
      </script>
   </body>
</html>

Ahora, solicita el navegador y veremos la siguiente respuesta en nuestra pantalla.

Del mismo modo, también podemos realizar otras operaciones.

API de nidos

La API de anidación contiene elementos en una matriz y funciona en una estructura de árbol jerárquica. Repasemos en detalle los distintos métodos de la API de Nests.

d3.nest() - Este método se utiliza para crear un nuevo nido.
nest.key(key)- Este método se utiliza para inicializar una nueva función de tecla. Esta función se utiliza para invocar cada elemento en una matriz de entrada y devolver elementos en el grupo.
nest.sortKeys(comparator)- Este método se utiliza para ordenar claves en un comparador específico. La función se define como d3.ascending o d3.descending.
nest.sortValues(comparator)- Este método se utiliza para ordenar valores en un comparador específico. La función de comparación clasifica los elementos de la hoja.
nest.map(array)- Este método se utiliza para aplicar la matriz especificada y devolver un mapa anidado. Cada entrada en el mapa devuelto corresponde a un valor de clave distinto devuelto por la primera función de clave. El valor de entrada depende del número de funciones clave registradas.
nest.object(array) - Este método se usa para aplicar el operador de anidamiento a la matriz especificada y devolver un objeto anidado.
nest.entries(array) - Este método se utiliza para aplicar el operador de nido a la matriz especificada y devolver una matriz de entradas de valores-clave.

Considere una página web simple nest.html para realizar los métodos de anidación discutidos anteriormente.

Example - Consideremos el siguiente ejemplo.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 Nest API</h3>
      <script>
         var data = [
            {
               "color" : "red",
               "key" : 1
            },
            {
               "color" : "green",
               "key" : 2
            },
            {
               "color" : "blue",
               "key" : 75
            }
         ]
         var nest =  d3.nest()
            .key(function (d) { return d.color; })
            .entries(data)console.log(nest);
         var filter = nest.filter(function (d) { return d.key = = = 'red' })
         console.log(filter);
      </script>
   </body>
</html>

Ahora, verifiquemos el resultado en un navegador y veremos el siguiente resultado.

Array[3]
0: Object
1: Object
2: Object
length: 3
__proto__: Array[0]

Array[1]
0: Object
length: 1
__proto__: Array[0]

↰ Previous page Next page ↱