D3.js - Selezioni

Le selezioni sono uno dei concetti fondamentali di D3.js. Si basa sui selettori CSS. Ci permette di selezionare uno o più elementi in una pagina web. Inoltre, ci consente di modificare, aggiungere o rimuovere elementi in relazione al set di dati predefinito. In questo capitolo vedremo come utilizzare le selezioni per creare visualizzazioni di dati.

D3.js aiuta a selezionare gli elementi dalla pagina HTML utilizzando i seguenti due metodi:

select()- Seleziona un solo elemento DOM facendo corrispondere il selettore CSS specificato. Se sono presenti più elementi per il selettore CSS specificato, seleziona solo il primo.
selectAll()- Seleziona tutti gli elementi DOM facendo corrispondere il selettore CSS specificato. Se hai familiarità con la selezione di elementi con jQuery, i selettori di D3.js sono quasi gli stessi.

Esaminiamo in dettaglio ciascuno dei metodi.

Il metodo select ()

Il metodo select () seleziona l'elemento HTML in base ai selettori CSS. Nei selettori CSS, puoi definire e accedere agli elementi HTML nei tre modi seguenti:

Tag di un elemento HTML (ad es. Div, h1, p, span, ecc.,)
Nome della classe di un elemento HTML
ID di un elemento HTML

Vediamolo in azione con esempi.

Selezione per tag

Puoi selezionare elementi HTML usando il suo TAG. La sintassi seguente viene utilizzata per selezionare gli elementi del tag "div",

d3.select(“div”)

Example - Crea una pagina "select_by_tag.html" e aggiungi le seguenti modifiche,

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

   <body>
      <div>
         Hello World!    
      </div>
      
      <script>
         alert(d3.select("div").text());
      </script>
   </body>
</html>

Richiedendo la pagina web tramite il browser, sullo schermo verrà visualizzato il seguente output:

Selezione in base al nome della classe

Gli elementi HTML con stili utilizzando le classi CSS possono essere selezionati utilizzando la seguente sintassi.

d3.select(“.<class name>”)

Crea una pagina web "select_by_class.html" e aggiungi le seguenti modifiche:

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         alert(d3.select(".myclass").text());
      </script>
   </body>
</html>

Richiedendo la pagina web tramite il browser, sullo schermo verrà visualizzato il seguente output:

Selezione per ID

Ogni elemento in una pagina HTML dovrebbe avere un ID univoco. Possiamo utilizzare questo ID univoco di un elemento per accedervi utilizzando il metodo select () come specificato di seguito.

d3.select(“#<id of an element>”)

Crea una pagina web "select_by_id.html" e aggiungi le seguenti modifiche.

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

   <body>
      <div id = "hello">
         Hello World!
      </div>
      
      <script>
         alert(d3.select("#hello").text());
      </script>
   </body>
</html>

Richiedendo la pagina web tramite il browser, verrà visualizzato il seguente output sullo schermo.

Aggiunta di elementi DOM

La selezione D3.js fornisce l'estensione append() e il text()metodi per aggiungere nuovi elementi ai documenti HTML esistenti. Questa sezione spiega in dettaglio l'aggiunta di elementi DOM.

Il metodo append ()

Il metodo append () aggiunge un nuovo elemento come ultimo figlio dell'elemento nella selezione corrente. Questo metodo può anche modificare lo stile degli elementi, i loro attributi, proprietà, HTML e contenuto del testo.

Crea una pagina web "select_and_append.html" e aggiungi le seguenti modifiche:

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span");
      </script>
   </body>
</html>

Richiedendo la pagina web tramite browser, è possibile visualizzare il seguente output sullo schermo,

Qui, il metodo append () aggiunge un nuovo intervallo di tag all'interno del tag div come mostrato di seguito:

<div class = "myclass">
   Hello World!<span></span>
</div>

Il metodo text ()

Il metodo text () viene utilizzato per impostare il contenuto degli elementi selezionati / aggiunti. Cambiamo l'esempio sopra e aggiungiamo il metodo text () come mostrato di seguito.

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span").text("from D3.js");
      </script>
   </body>
</html>

Ora aggiorna la pagina web e vedrai la seguente risposta.

Qui, lo script precedente esegue un'operazione di concatenamento. D3.js utilizza in modo intelligente una tecnica chiamatachain syntax, che potresti riconoscere da jQuery. Concatenando metodi insieme a punti, è possibile eseguire diverse azioni in una singola riga di codice. E 'facile e veloce. Lo stesso script può accedere anche senza la sintassi della catena come mostrato di seguito.

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

Modifica di elementi

D3.js fornisce vari metodi, html(), attr() e style()per modificare il contenuto e lo stile degli elementi selezionati. Vediamo come utilizzare i metodi di modifica in questo capitolo.

Il metodo html ()

Il metodo html () viene utilizzato per impostare il contenuto html degli elementi selezionati / aggiunti.

Crea una pagina web "select_and_add_html.html" e aggiungi il codice seguente.

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
      </script>
   </body>
</html>

Richiedendo la pagina web tramite il browser, verrà visualizzato il seguente output sullo schermo.

Il metodo attr ()

Il metodo attr () viene utilizzato per aggiungere o aggiornare l'attributo degli elementi selezionati. Crea una pagina web "select_and_modify.html" e aggiungi il codice seguente.

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

Richiedendo la pagina web tramite il browser, verrà visualizzato il seguente output sullo schermo.

Il metodo style ()

Il metodo style () viene utilizzato per impostare la proprietà dello stile degli elementi selezionati. Crea una pagina web "select_and_style.html" e aggiungi il codice seguente.

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").style("color", "red");
      </script>
   </body>
</html>

Richiedendo la pagina web tramite il browser, verrà visualizzato il seguente output sullo schermo.

Il metodo classed ()

Il metodo classed () viene utilizzato esclusivamente per impostare l'attributo "class" di un elemento HTML. Poiché un singolo elemento HTML può avere più classi; dobbiamo stare attenti durante l'assegnazione di una classe a un elemento HTML. Questo metodo sa come gestire una o più classi su un elemento e sarà performante.

Add class- Per aggiungere una classe, il secondo parametro del metodo classificato deve essere impostato su true. È definito di seguito:

d3.select(".myclass").classed("myanotherclass", true);

Remove class- Per rimuovere una classe, il secondo parametro del metodo classificato deve essere impostato su false. È definito di seguito:

d3.select(".myclass").classed("myanotherclass", false);

Check class- Per verificare l'esistenza di una classe, tralascia il secondo parametro e passa il nome della classe che stai interrogando. Questo restituirà vero, se esiste, falso, se non lo è.

d3.select(".myclass").classed("myanotherclass");

Questo restituirà true, se qualsiasi elemento nella selezione ha la classe. Usod3.select per la selezione di un singolo elemento.

Toggle class - Per capovolgere una classe nello stato opposto - rimuoverla se esiste già, aggiungerla se non esiste ancora - puoi eseguire una delle seguenti operazioni.

Per un singolo elemento, il codice potrebbe apparire come mostrato di seguito:

var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

Il metodo selectAll ()

Il metodo selectAll () viene utilizzato per selezionare più elementi nel documento HTML. Il metodo select seleziona il primo elemento, ma il metodo selectAll seleziona tutti gli elementi che corrispondono alla stringa del selettore specifica. Nel caso in cui la selezione non corrisponda a nessuno, restituisce una selezione vuota. Possiamo concatenare tutti i metodi di modifica di accodamento,append(), html(), text(), attr(), style(), classed(),ecc., anche nel metodo selectAll (). In questo caso, i metodi influenzeranno tutti gli elementi corrispondenti. Facci capire creando una nuova pagina web "select_multiple.html" e aggiungi il seguente script:

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

   <body>
      <h2 class = "myclass">Message</h2>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.selectAll(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

Richiedendo la pagina web tramite il browser, verrà visualizzato il seguente output sullo schermo.

Qui, il metodo attr () si applica a entrambi div e h2 tag e il colore del testo in entrambi i tag diventa rosso.

↰ Previous page Next page ↱

D3.js - Selezioni

Il metodo select ()

Selezione per tag

Selezione in base al nome della classe

Selezione per ID

Aggiunta di elementi DOM

Il metodo append ()

Il metodo text ()

Modifica di elementi

Il metodo html ()

Il metodo attr ()

Il metodo style ()

Il metodo classed ()

Il metodo selectAll ()

Tutorial D3.js