Ciao, non sono esperto di D3 ma rispondo in base a quanto ho letto nella documentazione e da quanto ho provato personalmente.
Qui la referenza del metodo html()
GiustoSe gli si passa un valore setta la proprietà innerHTML
Corretto ma in particolare la funzione deve essere impostata per restituire qualcosa, cioè attraverso un return (che sia usato esplicitamente o, come nel caso di un array function, anche implicitamente).Se invece gli si passa una funzione, questa viene eseguita e restituisce dei valori che vengono inseriti nella proprietà innerHTML degli elementi che si stanno considerando
Non esattamente, gli elementi a cui è applicato il metodo html() prescindono dall'argomento di tale metodo (che sia un semplice valore o una funzione che restituisce un valore); dipendono invece dalla selezione precedentemente effettuata da uno dei metodi di selezione. Usando select() la selezione comprenderà un unico elemento, cioè il primo che viene rilevato attraverso il selettore, mentre usando selectAll() la selezione comprenderà tutti gli elementi rilevati dal selettore.(quindi se gli do in pasto una funzione gli elementi HTML sono più di uno?)
La peculiarità di usare una funzione nel metodo html(), piuttosto che un semplice valore costante, sta nel fatto che tale funzione viene valutata per ogni elemento selezionato; alla funzione vengono passati 3 valori come argomenti: il dato corrente, l'indice corrente e il gruppo di nodi selezionati.
In particolare, il dato corrente è basato sull'array di dati che è possibile unire alla selezione di elementi, ad esempio, attraverso il metodo data().
Per comprendere meglio, formulo alcuni esempi con diverse situazioni.
Considerando questo HTML:
i seguenti script generano i risultati indicati:codice HTML:<p>Elemento 1</p> <p>Elemento 2</p> <p>Elemento 3</p>
codice:d3.select('p') .html('Pippo'); /* Risultato: <p>Pippo</p> <p>Elemento 2</p> <p>Elemento 3</p> */codice:d3.select('p') .html(function(){return 'Pippo'}); /* Risultato: <p>Pippo</p> <p>Elemento 2</p> <p>Elemento 3</p> */codice:d3.selectAll('p') .html('Pippo'); /* Risultato: <p>Pippo</p> <p>Pippo</p> <p>Pippo</p> */codice:d3.selectAll('p') .html(function(){return 'Pippo'}); /* Risultato: <p>Pippo</p> <p>Pippo</p> <p>Pippo</p> */
codice:d3.selectAll('p') .data(['Pippo', 'Pluto', 'Topolino']) .html(function(dato, indice, gruppo){ return indice + ') ' + dato; }); /* Risultato: <p>0) Pippo</p> <p>1) Pluto</p> <p>2) Topolino</p> */...codice:d3.selectAll('p') .data(['Pippo', 'Pluto']) .html(function(dato, indice, gruppo){ return indice + ') ' + dato; }); /* Risultato: <p>0) Pippo</p> <p>1) Pluto</p> <p>Elemento 3</p> */
Spero di aver chiarito qualche dubbio. Fai sapere.


Rispondi quotando