3.1 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa7367417b2b2512bc4 | Lavorare con i dati in D3 | 6 | 301497 | work-with-data-in-d3 |
--description--
La libreria D3 si concentra su un approccio basato sui dati. Quando si dispone di un insieme di dati, è possibile applicare i metodi D3 per visualizzarli sulla pagina. I dati sono disponibili in molti formati, ma questa sfida utilizza una semplice matrice di numeri.
Il primo passo è quello di rendere D3 consapevole dei dati. Il metodo data() è utilizzato su una selezione di elementi DOM per collegare i dati a questi elementi. Il set di dati viene passato come argomento al metodo.
Un comune metodo di lavoro è quello di creare un nuovo elemento nel documento per ogni elemento di dati nel set. A questo scopo D3 ha il metodo enter().
Quando enter() viene combinato con il metodo data(), guarda gli elementi selezionati dalla pagina e li confronta con il numero di elementi di dati nel set. Se ci sono meno elementi rispetto ai dati, crea quelli mancanti.
Ecco un esempio che seleziona un elemento ul e crea un nuovo elemento lista in base al numero di voci nell'array:
<body>
<ul></ul>
<script>
const dataset = ["a", "b", "c"];
d3.select("ul").selectAll("li")
.data(dataset)
.enter()
.append("li")
.text("New item");
</script>
</body>
Potrebbe sembrare confuso selezionare degli elementi che non esistono ancora. Questo dice a D3 di selezionare prima gli ul della pagina. Successivamente, seleziona tutti gli elementi dell'elenco, che restituisce una selezione vuota. Quindi il metodo data() esamina il set di dati ed esegue il codice successivo tre volte, una volta per ogni elemento nell'array. Il metodo enter() vede che non ci sono elementi li nella pagina, ma gliene servono tre (uno per ogni elemento di dati nel dataset). I nuovi elementi li sono aggiunti all'ul e contengono il testo New item.
--instructions--
Seleziona il nodo body, dopodiché seleziona tutti gli elementi h2. Fai creare e aggiungere a D3 un tag h2 per ogni elemento nell'array del dataset. Il testo nell'h2 dovrebbe dire New Title. Il tuo codice dovrebbe utilizzare i metodi data() e enter().
--hints--
Il tuo documento dovrebbe avere 9 elementi h2.
assert($('h2').length == 9);
Il testo nell'elemento h2 dovrebbe dire New Title. Le maiuscole e la spaziatura dovrebbero corrispondere esattamente.
assert(
$('h2')
.text()
.match(/New Title/g).length == 9
);
Il tuo codice dovrebbe usare il metodo data().
assert(code.match(/\.data/g));
Il tuo codice dovrebbe utilizzare il metodo enter().
assert(code.match(/\.enter/g));
--seed--
--seed-contents--
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
// Add your code below this line
// Add your code above this line
</script>
</body>
--solutions--
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body")
.selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text("New Title")
</script>
</body>