D3.js - Unione dati

L'unione dei dati è un altro concetto importante in D3.js. Funziona insieme alle selezioni e ci consente di manipolare il documento HTML rispetto al nostro set di dati (una serie di valori numerici). Per impostazione predefinita, D3.js dà al set di dati la massima priorità nei suoi metodi e ogni elemento nel set di dati corrisponde a un elemento HTML. Questo capitolo spiega in dettaglio i join di dati.

Cos'è un data join?

L'unione dei dati ci consente di inserire, modificare e rimuovere elementi (elemento HTML così come elementi SVG incorporati) in base al set di dati nel documento HTML esistente. Per impostazione predefinita, ogni elemento di dati nel set di dati corrisponde a un elemento (grafico) nel documento.

Man mano che il set di dati cambia, anche l'elemento corrispondente può essere manipolato facilmente. L'unione dei dati crea una stretta relazione tra i nostri dati e gli elementi grafici del documento. L'unione dei dati rende la manipolazione degli elementi basata sul set di dati un processo molto semplice e facile.

Come funziona Data Join?

Lo scopo principale del join dati è mappare gli elementi del documento esistente con il set di dati specificato. Crea una rappresentazione virtuale del documento rispetto al dato set di dati e fornisce metodi per lavorare con la rappresentazione virtuale. Consideriamo un semplice set di dati come mostrato di seguito.

[10, 20, 30, 25, 15]

Il set di dati ha cinque elementi e quindi può essere mappato a cinque elementi del documento. Cerchiamo di mapparlo al fileli elemento del seguente documento utilizzando il metodo selectAll () del selettore e il metodo data () di data join.

HTML

<ul id = "list">
   <li><li>
   <li></li>
</ul>

Codice D3.js

d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);

Ora ci sono cinque elementi virtuali nel documento. I primi due elementi virtuali sono i dueli elemento definito nel documento come mostrato di seguito.

1. li - 10
2. li - 20

Possiamo usare tutti i metodi di modifica degli elementi del selettore come attr(), style(), text(), ecc. per i primi due li come mostrato di seguito.

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return d; });

La funzione nel metodo text () viene utilizzata per ottenere il file lielementi mappati dati. Qui,d rappresentano 10 per primo li elemento e 20 per il secondo li elemento.

I prossimi tre elementi possono essere mappati a qualsiasi elemento e può essere fatto utilizzando il metodo enter () del join dati e append () del selettore. Il metodo enter () dà accesso ai dati rimanenti (che non sono mappati agli elementi esistenti) e il metodo append () viene utilizzato per creare un nuovo elemento dai dati corrispondenti. Cerchiamo di crearelianche per i restanti elementi di dati. La mappa dei dati è la seguente:

3. li - 30
4. li - 25
5. li - 15

Il codice per creare un nuovo elemento li è il seguente:

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d) 
      { return "This is dynamically created element and the value is " + d; });

Data join fornisce un altro metodo chiamato come exit() method per elaborare gli elementi di dati rimossi dinamicamente dal set di dati come mostrato di seguito.

d3.selectAll("li")
   .data([10, 20, 30, 15])
   .exit()
   .remove()

Qui, abbiamo rimosso il quarto elemento dal set di dati e il suo li corrispondente utilizzando i metodi exit () e remove ().

Il codice completo è il seguente:

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <ul id = "list">
         <li></li>
         <li></li>
      </ul>
        
      <input type = "button" name = "remove" value = "Remove fourth value" 
         onclick = "javascript:remove()" />
      
      <script>
         d3.select("#list").selectAll("li")
            .data([10, 20, 30, 25, 15])
            .text(function(d) 
               { return "This is pre-existing element and the value is " + d; })
            .enter()
            .append("li")
            .text(function(d) 
               { return "This is dynamically created element and the value is " + d; });
             
         function remove() {
            d3.selectAll("li")
            .data([10, 20, 30, 15])
            .exit()
            .remove()
         }
      </script>
   </body>
</html>

Il risultato del codice precedente sarà il seguente:


Tutorial D3.js

Licensed under cc by-sa 3.0