Setup Menus in Admin Panel

School.Dataninja.it

Visualizzazioni dati con d3js: modificare il contenuto degli elementi

Puoi agire anche sul contenuto degli elementi della pagina selezionati, con i metodi text() (testo semplice) e html() (frammenti html).

Una volta selezionati gli elementi su cui agire, oltre che modificare i loro attributi, è possibile modificare anche il loro contenuto, sia che si tratti di semplice testo (per esempio all’interno di un paragrafo), sia che si tratti di un frammento anche complesso di HTML.

Testo semplice: il metodo text()

Molti elementi di una pagina web possono contenere testo. Pensa ai tag p, agli span, ai div, ecc. Con il metodo text() puoi modificarlo a piacere. Per esempio con  d3.select("#testo-modificabile").text("Solo un altro testo") che agisce sul seguente span: “solo un altro testo“.

Non sei impazzito, quella scritta cambia davvero… sorpreso? Ho inserito un semplice script nella pagina che ogni due secondi e mezzo modifica il contenuto di quello span, prendendo a caso una delle parole che compongono questo testo. Prova ad eseguire nella console del tuo browser il comando di prima: d3.select("#testo-modificabile").text("Quello che vuoi...") . Apparirà per qualche istante, poi sarà sostituito con un’altra parola. Ecco il codice:

Forse hai notato che per scrivere una parola sempre diversa presa dall’array tokens ho usato il metodo text() passandogli una funzione come parametro, invece che una stringa. Tutto va come atteso finché la funzione in text(), una volta eseguita, ritorna una stringa. Questo meccanismo (passare una funzione che costruisce e ritorna qualcosa, piuttosto che direttamente quel qualcosa) è generale e molto potente, perché permette di calcolare al volo attributi e contenuti in base a logiche arbitrarie scritte all’interno della funzione di callback. Vale lo stesso discorso anche per i metodi attr(), property(), classed(), style() (e molti altri) che hai già visto. Ne apprezzerai l’estrema utilità quando comincerai ad associare i tuoi dati agli elementi della pagina.

Contenuto formattato: il metodo html()

Se provi a passare un frammento HTML (sotto forma di stringa) al metodo text() ti accorgerai che le cose non vanno come ti aspetti. Per esempio d3.select("#html-modificabile").text("<em>Testo in corsivo</em>")  produce “<em>Testo in corsivo</em>” e non “Testo in corsivo“. Questo perché il metodo text() si aspetta un testo semplice, quindi lo stampa così com’è, codificando i classici caratteri dell’HTML (le parentesi angolari, per esempio) con le corrispettive entità HTML: per esempio “&lt;” per “<” e “&gt;” per “>”.

Nel caso tu voglia scrivere direttamente del vero HTML in un elemento selezionato devi quindi usare il metodo html(), che preserva i tag e che viene correttamente interpretato dal browser: d3.select("#html-modificabile").html("<em>Testo in corsivo</em>")  produce come atteso “Testo in corsivo“. Anche al metodo html() puoi passare una funzione di callback che ritorni una stringa.

Letture: 339