D3.js - API array

D3 contiene una raccolta di moduli. È possibile utilizzare ogni modulo in modo indipendente o una raccolta di moduli insieme per eseguire operazioni. Questo capitolo spiega in dettaglio l'API di array.

Cos'è un array?

Un array contiene una raccolta sequenziale di dimensioni fisse di elementi dello stesso tipo. Un array viene utilizzato per memorizzare una raccolta di dati, ma spesso è più utile pensare a un array come una raccolta di variabili dello stesso tipo.

Configurazione dell'API

Puoi configurare facilmente l'API utilizzando lo script seguente.

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

Metodi API per statistiche di array

Di seguito sono riportati alcuni dei più importanti metodi API per le statistiche degli array.

d3.min(array)
d3.max(array)
d3.extent(array)
d3.sum(array)
d3.mean(array)
d3.quantile(array)
d3.variance(array)
d3.deviation(array)

Cerchiamo di discutere ciascuno di questi in dettaglio.

d3.min (array)

Restituisce il valore minimo nell'array dato usando l'ordine naturale.

Example - Considera il seguente script.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.min(data));
</script>

Result - Lo script precedente restituisce il valore minimo nell'array 20 nella tua console.

d3.max (array)

Restituisce il valore massimo in un dato array.

Example - Considera il seguente script.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.max(data));
</script>

Result - Lo script precedente restituisce il valore massimo nell'array (100) nella tua console.

d3.extent (array)

Restituisce il valore minimo e massimo nella matrice data.

Example - Considera il seguente script.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.extent(data));
</script>

Result - Lo script precedente restituisce un valore di extent [20,100].

d3.sum (array)

Restituisce la somma della matrice di numeri data. Se l'array è vuoto, restituisce 0.

Example - Considera quanto segue di seguito.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.sum(data));
</script>

Result - Lo script sopra restituisce il valore della somma è 300.

d3.mean (array)

Restituisce la media del dato array di numeri.

Example - Considera quanto segue di seguito.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.mean(data));
</script>

Result - Lo script sopra restituisce il valore medio 60. Allo stesso modo, puoi controllare il valore mediano.

d3.quantile (array)

Restituisce il quantile p della matrice di numeri ordinata data, dove p è un numero compreso nell'intervallo [0, 1]. Ad esempio, la mediana può essere calcolata utilizzando p = 0,5, il primo quartile in p = 0,25 e il terzo quartile in p = 0,75. Questa implementazione utilizza il metodo R-7, il linguaggio di programmazione R predefinito ed Excel.

Example - Considera il seguente esempio.

var data = [20, 40, 60, 80, 100];
d3.quantile(data, 0); // output is 20
d3.quantile(data, 0.5); // output is 60
d3.quantile(data, 1); // output is 100

Allo stesso modo, puoi controllare altri valori.

d3.variance (array)

Restituisce la varianza della matrice di numeri data.

Example - Considera il seguente script.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.variance(data));
</script>

Result - Lo script precedente restituisce il valore di varianza 1000.

d3.deviation (array)

Restituisce la deviazione standard della matrice data. Se l'array ha meno di due valori, restituisce undefined.

Example - Considera quanto segue di seguito.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.deviation(data));
</script>

Result - Lo script precedente restituisce il valore di deviazione come 31.622776601683793.

Example- Eseguiamo tutti i metodi dell'API Array discussi sopra utilizzando il seguente script. Crea una pagina web "array.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 array API</h3>
      <script>
         var data = [20,40,60,80,100];
         console.log(d3.min(data));  
         console.log(d3.max(data));
         console.log(d3.extent(data));
         console.log(d3.sum(data));
         console.log(d3.mean(data));
         console.log(d3.quantile(data,0.5));
         console.log(d3.variance(data));
         console.log(d3.deviation(data));
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta.

Metodi API di ricerca array

Di seguito sono riportati un paio di importanti metodi API di ricerca array.

d3.scan(array)
d3. ascendente (a, b)

Cerchiamo di capire entrambi in dettaglio.

d3.scan (array)

Questo metodo viene utilizzato per eseguire una scansione lineare dell'array specificato. Restituisce l'indice dell'elemento minimo al comparatore specificato. Di seguito viene definito un semplice esempio.

Example -

var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // output is 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // output is 1

d3. ascendente (a, b)

Questo metodo viene utilizzato per eseguire la funzione di confronto. Può essere implementato come:

function ascending(a, b) {
   return a < b ? -1 : a > b ? 1 : a > =  b ? 0 : NaN;
}

Se nessuna funzione di confronto è specificata per il metodo di ordinamento integrato, l'ordine predefinito è alfabetico. La funzione precedente restituisce -1, se a è minore di b, o 1, se a è maggiore di b, o 0.

Allo stesso modo, puoi eseguire il metodo discendente (a, b). Restituisce -1, se a è maggiore di b, o 1, se a è minore di b, o 0. Questa funzione esegue l'ordine naturale inverso.

Example -

Crea una pagina web array_search.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 array API</h3>
      <script>
         var array = [{one: 1}, {one: 10}];
         console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // 0
         console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // 1
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo il seguente risultato.

API Array Transformations

Di seguito sono riportati alcuni dei metodi API di trasformazione degli array più importanti.

d3.cross (a, b [, riduttore])
d3.merge(arrays)
d3.pairs (array [, riduttore])
d3.permute (array, indici)
d3.zip(arrays)

Cerchiamo di capire ciascuno di questi in dettaglio.

d3.cross (a, b [, riduttore])

Questo metodo viene utilizzato per restituire il prodotto cartesiano dei due array dati a e b. Di seguito viene definito un semplice esempio.

d3.cross([10, 20], ["a", "b"]); // output is [[10, "a"], [10, "b"], [20, "a"], [20, "b"]]

d3.merge (array)

Questo metodo viene utilizzato per unire gli array ed è definito di seguito.

d3.merge([[10], [20]]); // output is [10, 20]

d3.pairs (array [, riduttore])

Questo metodo viene utilizzato per accoppiare gli elementi dell'array ed è definito di seguito.

d3.pairs([10, 20, 30, 40]); // output is [[10, 20], [20, 30], [30, 40]]

d3.permute (array, indici)

Questo metodo viene utilizzato per eseguire la permutazione da array e indici specificati. È inoltre possibile eseguire i valori da un oggetto in un array. È spiegato di seguito.

var object = {fruit:"mango", color: "yellow"},
   fields = ["fruit", "color"];
d3.permute(object, fields); // output is "mango" "yellow"

d3.zip (array)

Questo metodo viene utilizzato per restituire un array di array. Se gli array contengono solo un singolo array, l'array restituito contiene array a un elemento. Se non viene specificato alcun argomento, la matrice restituita è vuota. È definito di seguito.

d3.zip([10, 20], [30, 40]); // output is [[10, 30], [20, 40]]

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

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

   <body>
      <h3>D3 array API</h3>
      <script>
         console.log(d3.cross([10, 20], ["a", "b"]));
         console.log(d3.merge([[10], [30]]));
         console.log(d3.pairs([10, 20, 30, 40]));
         var object = {fruit:"mango", color: "yellow"},
         fields = ["fruit", "color"];
         console.log(d3.permute(object, fields)); 
         console.log(d3.zip([10, 20], [30, 40]));
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta.

↰ Previous page Next page ↱

D3.js - API array

Cos'è un array?

Configurazione dell'API

Metodi API per statistiche di array

d3.min (array)

d3.max (array)

d3.extent (array)

d3.sum (array)

d3.mean (array)

d3.quantile (array)

d3.variance (array)

d3.deviation (array)

Metodi API di ricerca array

d3.scan (array)

d3. ascendente (a, b)

API Array Transformations

d3.cross (a, b [, riduttore])

d3.merge (array)

d3.pairs (array [, riduttore])

d3.permute (array, indici)

d3.zip (array)

Tutorial D3.js