Setup Menus in Admin Panel

School.Dataninja.it

Visualizzazioni dati con d3js: gestire l’interazione con l’utente

Gestire l'interazione dell'utente con gli elementi della pagina registrando azioni di ascolto agli eventi.

Ti manca solo un ingrediente per costruire visualizzazioni di dati complete. Gestire l’interazione dell’utente, cioè definire il comportamento dell’applicazione, in ogni sua parte, nel caso l’utente faccia qualcosa: passare il mouse sopra un elemento, cliccarci sopra, premere un tasto, fare tap o doppio tap.

D3js mette a disposizione tre famiglie di metodi per gestire al meglio l’interazione utente:

In questa unità vedrai solo il primo caso, quello che ti capiterà di gestire più frequentemente, che fa riferimento alla modalità standard con cui javascript rappresenta l’interazione dell’utente con la pagina e permette di gestirla attraverso la registrazione di listener agli eventi. Un listener altro non è che una funzione di callback che viene eseguita non appena avviene l’evento a cui è stata registrata. Nella documentazione ufficiale del W3C puoi trovare l’elenco di tutti gli eventi standard previsti.

Il metodo on()

Ora clicca qui!

Un comportamento un po’ strano, che però mostra come associare una qualsiasi azione sulla pagina al verificarsi di un evento su un determinato elemento. In questo caso un append() al click su un link.Hai già visto qualcosa del genere nell’unità sulle animazioni, quando potevi fermare l’animazione delle barre con un click su un link (e poi, volendo, farla ripartire).

A tutto questo pensa il metodo on(), che prende due parametri: il nome dell’evento (una stringa tra “click”, “mouseover”, ecc.) e il listener, la funzione di callback a cui viene passato il dato associato all’elemento target dell’evento. Ecco il semplice codice che gestisce il giochino qui sopra.

L’oggetto d3.event

L’oggetto che rappresenta l’evento è pieno di informazioni utili che possono intervenire in ciò che farà la funzione listener. In altre librerie, come jQuery, alla funzione viene passato l’evento come parametro, ma non in d3js, perché per coerenza il primo parametro è il dato associato, il secondo è la posizione nella selezione, ecc. Ogni volta che avviene un evento, quindi, il suo oggetto (standard) è accessibile nella variabile d3.event e alcuni metodi aggiuntivi aiutano a interpretare informazioni molto usate come la posizione del mouse in quel momento (d3.mouse()), la posizione del tap (d3.touch()) o dei tap, nel caso di schermi multi-touch (d3.touches()) relativi a un container specifico passato come parametro. Ecco per esempio le coordinate del tuo mouse relativamente a questa colonna di testo: [Xpx, Ypx]. Ed ecco il codice.

Non c’è molto altro, anche perché d3js non aggiunge molto ai metodi standard del javascript nel gestire gli eventi. Hai già visto come evitare il comportamento di default sui link con il metodo d3.event.preventDefault(). Vale sempre il meccanismo di propagazione dell’evento su per l’albero del DOM, su cui puoi intervenire con il metodo d3.event.stopPropagation().

In generale ti consiglio di registrare sempre un listener su elementi visibili all’utente con cui può quindi interagire consapevolmente, di farlo sempre dopo che sono stati effettivamente aggiunti al DOM (altrimenti non funzionano), di verificare che vi siano effettivamente associati i dati che vuoi usare (direttamente a loro o ai padri, nel caso di selezioni annidate).

Letture: 389