D3.js - API di selezione

Le selezioni sono una potente trasformazione guidata dai dati del DOM (Document Object Model). Viene utilizzato per impostare attributi, stili, proprietà, HTML o contenuto di testo e molto altro ancora. Questo capitolo spiega in dettaglio le selezioni API.

Configurazione dell'API

È possibile configurare l'API direttamente utilizzando lo script seguente.

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

</script>

Metodi API di selezione

Di seguito sono riportati i metodi più importanti nella selezione dell'API.

  • d3.selection()
  • d3.select(selector)
  • d3.selectAll(selector)
  • selection.selectAll(selector)
  • selection.filter(filter)
  • selection.merge(other)
  • d3.matcher(selector)
  • d3.creator(name)
  • selection.each(function)
  • selezione.call (funzione [, argomenti ...])
  • d3.local()
  • local.set (nodo, valore)
  • local.get(node)
  • local.remove(node)

Discutiamo ora ciascuno di questi in dettaglio.

d3.selection ()

Questo metodo viene utilizzato per selezionare l'elemento radice. Questa funzione può essere utilizzata anche per testare le selezioni o per estendere la selezione d3js.

d3.select (selettore)

Questo metodo viene utilizzato per selezionare il primo elemento che corrisponde alla stringa del selettore specificata.

Example - Consideriamo il seguente esempio.

var body = d3.select("body");

Se il selettore non è una stringa, seleziona il nodo specificato, definito di seguito.

d3.select("p").style("color", "red");

d3.selectAll (selettore)

Questo metodo seleziona tutti gli elementi che corrispondono alla stringa del selettore specificata.

Example - Consideriamo il seguente esempio.

var body = d3.selectAll("body");

Se il selettore non è una stringa, seleziona la matrice di nodi specificata, definita di seguito.

d3.selectAll("body").style("color", "red");

selection.selectAll (selettore)

Questo metodo viene utilizzato per selezionare un elemento. Seleziona gli elementi discendenti che corrispondono alla stringa del selettore specificata. Gli elementi nella selezione restituita vengono raggruppati in base al nodo padre corrispondente in questa selezione. Se nessun elemento corrisponde al selettore specificato per l'elemento corrente, o se il selettore è nullo, il gruppo all'indice corrente sarà vuoto.

Example - Consideriamo il seguente esempio.

var b = d3.selectAll("p").selectAll("b");

selection.filter (filtro)

Questo metodo viene utilizzato per filtrare la selezione, restituendo una nuova selezione che contiene solo gli elementi per i quali il filtro specificato è vero.

Example - Consideriamo il seguente esempio.

var even = d3.selectAll("tr").filter(":nth-child(odd)");

Qui, filtrare una selezione di righe di tabella restituisce solo dispari.

selection.merge (altro)

Questo metodo viene utilizzato per restituire una nuova selezione che si fonde con l'altra selezione specificata.

Example - Consideriamo il seguente esempio.

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher (selettore)

Questo metodo viene utilizzato per assegnare il selettore specificato. Restituisce una funzione, che restituisce true.

Example - Consideriamo il seguente esempio.

var p = selection.filter(d3.matcher("p"));

d3.creator (nome)

Questo metodo viene utilizzato per assegnare il nome dell'elemento specificato Restituisce una funzione, che crea un elemento con il nome dato, assumendo che questo sia l'elemento genitore.

Example - Consideriamo il seguente esempio.

selection.append(d3.creator("p"));

selection.each (funzione)

Questo metodo viene utilizzato per richiamare la funzione specificata per ogni elemento selezionato, nell'ordine passato dal dato corrente (d), dall'indice corrente (i) e dal gruppo corrente (nodi) con questo come elemento DOM corrente (nodi [i ]). È spiegato di seguito.

parent.each(function(p, j) {
   d3.select(this)
      .selectAll(".child")
      .text(function(d, i) { return "child " + d.name + " of " + p.name; });
});

selezione.call (funzione [, argomenti ...])

Viene utilizzato per richiamare la funzione specificata esattamente una volta. La sintassi è mostrata di seguito.

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

Questo metodo può essere specificato come mostrato di seguito.

d3.selectAll("p").call(name, "Adam", "David");

d3.local ()

D3 local consente di definire lo stato locale indipendente dai dati.

Example - Consideriamo il seguente esempio.

var data = d3.local();

A differenza di var, anche il valore di ogni locale ha l'ambito del DOM.

local.set (nodo, valore)

Questo metodo imposta il valore di questo locale sul nodo specificato sul valore.

Example - Consideriamo il seguente esempio.

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

Questo metodo restituisce il valore di questo locale sul nodo specificato. Se il nodo non definisce questo locale, restituisce il valore dall'antenato più vicino che lo definisce.

local.remove (nodo)

Questo metodo elimina il valore di questo locale dal nodo specificato. Restituisce true, se il nodo è definito, altrimenti restituisce false.