--- id: 587d7fa7367417b2b2512bc5 title: Work with Dynamic Data in D3 challengeType: 6 videoUrl: '' localeTitle: Trabajar con datos dinámicos en D3 --- ## Description
Los dos últimos desafíos cubren los aspectos básicos de mostrar datos dinámicamente con D3 usando los métodos data() y enter() . Estos métodos toman un conjunto de datos y, junto con el método append() , crean un nuevo elemento DOM para cada entrada en el conjunto de datos. En el desafío anterior, creó un nuevo elemento h2 para cada elemento en la matriz del dataset , pero todos contenían el mismo texto, "Título nuevo". Esto se debe a que no ha utilizado los datos vinculados a cada uno de los elementos h2 . El método D3 text() puede tomar una cadena o una función de devolución de llamada como un argumento: selection.text((d) => d) En el ejemplo anterior, el parámetro d refiere a una sola entrada en el conjunto de datos que una selección está vinculada a. Utilizando el ejemplo actual como contexto, el primer elemento h2 está vinculado a 12, el segundo elemento h2 está vinculado a 31, el tercer elemento h2 está vinculado a 22, y así sucesivamente.
## Instructions
Cambie el método text() para que cada elemento h2 muestre el valor correspondiente de la matriz del dataset con un solo espacio y "USD". Por ejemplo, el primer encabezado debe ser "12 USD".
## Tests
```yml tests: - text: El primer h2 debe tener el texto "12 USD". testString: 'assert($("h2").eq(0).text() == "12 USD", "The first h2 should have the text "12 USD".");' - text: El segundo h2 debe tener el texto "31 USD". testString: 'assert($("h2").eq(1).text() == "31 USD", "The second h2 should have the text "31 USD".");' - text: El tercer h2 debe tener el texto "22 USD". testString: 'assert($("h2").eq(2).text() == "22 USD", "The third h2 should have the text "22 USD".");' - text: El cuarto h2 debe tener el texto "17 USD". testString: 'assert($("h2").eq(3).text() == "17 USD", "The fourth h2 should have the text "17 USD".");' - text: El quinto h2 debe tener el texto "25 USD". testString: 'assert($("h2").eq(4).text() == "25 USD", "The fifth h2 should have the text "25 USD".");' - text: El sexto h2 debe tener el texto "18 USD". testString: 'assert($("h2").eq(5).text() == "18 USD", "The sixth h2 should have the text "18 USD".");' - text: El séptimo h2 debe tener el texto "29 USD". testString: 'assert($("h2").eq(6).text() == "29 USD", "The seventh h2 should have the text "29 USD".");' - text: El octavo h2 debe tener el texto "14 USD". testString: 'assert($("h2").eq(7).text() == "14 USD", "The eighth h2 should have the text "14 USD".");' - text: El noveno h2 debe tener el texto "9 USD". testString: 'assert($("h2").eq(8).text() == "9 USD", "The ninth h2 should have the text "9 USD".");' ```
## Challenge Seed
```html ```
## Solution
```js // solution required ```