D3.js - API Collections

Una collezione è semplicemente un oggetto che raggruppa più elementi in una singola unità. È anche chiamato contenitore. Questo capitolo spiega in dettaglio l'API delle collezioni.

Configurazione dell'API

È possibile configurare l'API utilizzando il seguente script.

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

</script>

Metodi API per le raccolte

L'API delle collezioni contiene oggetti, mappe, set e nidi. Di seguito sono riportati i metodi API delle raccolte più comunemente utilizzati.

  • API degli oggetti
  • API di Maps
  • Imposta API
  • API dei nidi

Esaminiamo in dettaglio ciascuna di queste API.

API degli oggetti

Object API è uno dei tipi di dati importanti. Supporta i seguenti metodi:

  • d3.keys(object) - Questo metodo contiene le chiavi della proprietà dell'oggetto e restituisce un array dei nomi delle proprietà.

  • d3.values(object) - Questo metodo contiene i valori dell'oggetto e restituisce un array di valori di proprietà.

  • d3.entries(object)- Questo metodo viene utilizzato per restituire un array contenente sia le chiavi che i valori dell'oggetto specificato. Ogni voce è un oggetto con una chiave e un valore.

Example - Consideriamo il seguente codice.

d3.entries({one: 1})

Qui, la chiave è uno e il valore è 1.

Example - Crea una pagina web objects.html e aggiungi le seguenti modifiche.

<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>

Ora, richiedi il browser e vedrai la seguente risposta.

API di Maps

Una mappa contiene valori basati su coppie chiave e valore. Ogni coppia chiave e valore è nota come voce. Una mappa contiene solo chiavi univoche. È utile per cercare, aggiornare o eliminare elementi in base alla chiave. Esaminiamo in dettaglio i vari metodi dell'API di Maps.

  • d3.map([object[, key]])- Questo metodo viene utilizzato per creare una nuova mappa. L'oggetto viene utilizzato per copiare tutte le proprietà enumerabili.

  • map.has(key) - Questo metodo viene utilizzato per verificare se la mappa ha una voce per la stringa chiave specificata.

  • map.get(key) - Questo metodo viene utilizzato per restituire il valore per la stringa chiave specificata.

  • map.set(key, value)- Questo metodo viene utilizzato per impostare il valore per la stringa chiave specificata. Se la mappa aveva in precedenza una voce per la stessa stringa di chiavi, la vecchia voce viene sostituita con il nuovo valore.

  • map.remove(key)- Viene utilizzato per rimuovere la voce della mappa. Se la chiave non è specificata, restituisce false.

  • map.clear() - Rimuove tutte le voci da questa mappa.

  • map.keys() - Restituisce un array di chiavi stringa per ogni voce in questa mappa.

  • map.values() - Restituisce un array di valori per ogni voce in questa mappa.

  • map.entries() - Restituisce un array di oggetti valore-chiave per ogni voce in questa mappa.

  • (x) map.each(function) - Questo metodo viene utilizzato per chiamare la funzione specificata per ciascuna voce nella mappa.

  • (xi) map.empty() - Restituisce vero se e solo se questa mappa ha zero voci.

  • (xii) map.size() - Restituisce il numero di voci in questa mappa.

Example - Crea una pagina web maps.html e aggiungi le seguenti modifiche.

<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>

Ora, richiedi il browser e vedremo la seguente risposta.

Allo stesso modo, puoi eseguire anche altre operazioni.

Imposta API

Un set è una raccolta che non può contenere elementi duplicati. Modella l'astrazione dell'insieme matematico. Esaminiamo in dettaglio i vari metodi API dei set.

  • d3.set([array[, accessor]])- Questo metodo viene utilizzato per creare un nuovo set. La matrice viene utilizzata per aggiungere valori stringa. Una funzione di accesso è facoltativa.

  • set.has(value) - Questo metodo viene utilizzato per verificare se il set ha una voce per la stringa di valore specificata.

  • set.add(value) - Viene utilizzato per aggiungere la stringa del valore specificato al set.

  • set.remove(value) - Viene utilizzato per rimuovere il set che contiene la stringa del valore specificato.

  • set.clear() - Rimuove tutti i valori da questo set.

  • set.values() - Questo metodo viene utilizzato per restituire un array di valori al set.

  • set.empty() - Restituisce vero se e solo se questo insieme ha valori zero.

  • set.size() - Restituisce il numero di valori in questo set.

Example - Crea una pagina web sets.html e aggiungi le seguenti modifiche.

<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>

Ora, richiedi il browser e vedremo la seguente risposta sul nostro schermo.

Allo stesso modo, possiamo eseguire anche altre operazioni.

API dei nidi

L'API di annidamento contiene elementi nell'array e funziona in una struttura ad albero gerarchica. Esaminiamo in dettaglio i vari metodi API di Nests.

  • d3.nest() - Questo metodo viene utilizzato per creare un nuovo nido.

  • nest.key(key)- Questo metodo viene utilizzato per inizializzare una nuova funzione chiave. Questa funzione viene utilizzata per richiamare ogni elemento in una matrice di input e restituire elementi nel gruppo.

  • nest.sortKeys(comparator)- Questo metodo viene utilizzato per ordinare le chiavi in ​​un comparatore specificato. La funzione è definita come d3.ascending o d3.descending.

  • nest.sortValues(comparator)- Questo metodo viene utilizzato per ordinare i valori in un comparatore specificato. La funzione comparatore ordina gli elementi foglia.

  • nest.map(array)- Questo metodo viene utilizzato per applicare l'array specificato e per restituire una mappa nidificata. Ogni voce nella mappa restituita corrisponde a un valore chiave distinto restituito dalla prima funzione chiave. Il valore della voce dipende dal numero di funzioni dei tasti registrate.

  • nest.object(array) - Questo metodo viene utilizzato per applicare l'operatore annidamento all'array specificato e restituire un oggetto annidato.

  • nest.entries(array) - Questo metodo viene utilizzato per applicare l'operatore annidamento all'array specificato e restituire un array di voci di valori-chiave.

Considera una semplice pagina web nest.html per eseguire i metodi di annidamento discussi sopra.

Example - Consideriamo il seguente esempio.

<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>

Ora, controlla il risultato in un browser e vedremo il seguente risultato.

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

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