2021-06-15 00:49:18 -07:00
---
id: 587d7fa7367417b2b2512bc5
2021-07-26 23:39:21 +09:00
title: Trabalhar com dados dinâmicos no D3
2021-06-15 00:49:18 -07:00
challengeType: 6
forumTopicId: 301498
dashedName: work-with-dynamic-data-in-d3
---
# --description--
2021-07-26 23:39:21 +09:00
Os dois últimos desafios cobrem o básico da exibição de dados dinamicamente com o D3 usando os métodos `data()` e `enter()` . Esses métodos requerem um conjunto de dados e, junto com o método `append()` , criam um novo elemento do DOM para cada entrada no conjunto de dados.
2021-06-15 00:49:18 -07:00
2021-07-26 23:39:21 +09:00
No desafio anterior, você criou um novo elemento `h2` para cada item no array do `dataset` , mas todos continham o mesmo texto, `New Title` . Isso ocorreu porque você ainda não utilizou os dados que estão associados a cada um dos elementos `h2` .
2021-06-15 00:49:18 -07:00
2021-07-26 23:39:21 +09:00
O método `text()` do D3 pode receber uma string ou uma função de callback como um argumento:
2021-06-15 00:49:18 -07:00
```js
selection.text((d) => d)
```
2021-07-26 23:39:21 +09:00
No exemplo acima, o parâmetro `d` se refere a uma única entrada no conjunto de dados a qual uma seleção está vinculada.
2021-06-15 00:49:18 -07:00
2021-07-26 23:39:21 +09:00
Usando o exemplo atual como contexto, o primeiro elemento `h2` está ligado a 12, o segundo elemento `h2` está ligado a 31, o terceiro elemento `h2` está ligado a 22 e assim por diante.
2021-06-15 00:49:18 -07:00
# --instructions--
2021-07-26 23:39:21 +09:00
Altere o método `text()` para que cada elemento `h2` exiba o valor correspondente do array do `dataset` com um único espaço e a string `USD` . Por exemplo, o primeiro título deve ser `12 USD` .
2021-06-15 00:49:18 -07:00
# --hints--
2021-07-26 23:39:21 +09:00
O primeiro `h2` deve ter o texto `12 USD` .
2021-06-15 00:49:18 -07:00
```js
assert($('h2').eq(0).text() == '12 USD');
```
2021-07-26 23:39:21 +09:00
O segundo `h2` deve ter o texto `31 USD` .
2021-06-15 00:49:18 -07:00
```js
assert($('h2').eq(1).text() == '31 USD');
```
2021-07-26 23:39:21 +09:00
O terceiro `h2` deve ter o texto `22 USD` .
2021-06-15 00:49:18 -07:00
```js
assert($('h2').eq(2).text() == '22 USD');
```
2021-07-26 23:39:21 +09:00
O quarto `h2` deve ter o texto `17 USD` .
2021-06-15 00:49:18 -07:00
```js
assert($('h2').eq(3).text() == '17 USD');
```
2021-07-26 23:39:21 +09:00
O quinto `h2` deve ter o texto `25 USD` .
2021-06-15 00:49:18 -07:00
```js
assert($('h2').eq(4).text() == '25 USD');
```
2021-07-26 23:39:21 +09:00
O sexto `h2` deve ter o texto `18 USD` .
2021-06-15 00:49:18 -07:00
```js
assert($('h2').eq(5).text() == '18 USD');
```
2021-07-26 23:39:21 +09:00
O sétimo `h2` deve ter o texto `29 USD` .
2021-06-15 00:49:18 -07:00
```js
assert($('h2').eq(6).text() == '29 USD');
```
2021-07-26 23:39:21 +09:00
O oitavo `h2` deve ter o texto `14 USD` .
2021-06-15 00:49:18 -07:00
```js
assert($('h2').eq(7).text() == '14 USD');
```
2021-07-26 23:39:21 +09:00
O nono `h2` deve ter o texto `9 USD` .
2021-06-15 00:49:18 -07:00
```js
assert($('h2').eq(8).text() == '9 USD');
```
# --seed--
## --seed-contents--
```html
< body >
< script >
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
// Add your code below this line
.text("New Title");
// Add your code above this line
< / script >
< / body >
```
# --solutions--
```html
< body >
< script >
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text((d) => `${d} USD` );
< / script >
< / body >
```
