---
id: 587d7fa6367417b2b2512bc2
title: Add Document Elements with D3
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Añadir elementos de documento con D3
---
## Description
D3 tiene varios métodos que le permiten agregar y cambiar elementos en su documento. El método select()
selecciona un elemento del documento. Toma un argumento para el nombre del elemento que desea y devuelve un nodo HTML para el primer elemento del documento que coincide con el nombre. Aquí hay un ejemplo: const anchor = d3.select("a");
El ejemplo anterior encuentra la primera etiqueta de anclaje en la página y guarda un nodo HTML para ella en el anchor
la variable. Puede utilizar la selección con otros métodos. La parte "d3" del ejemplo es una referencia al objeto D3, que es cómo acceder a los métodos D3. Otros dos métodos útiles son append()
y text()
. El método append()
toma un argumento para el elemento que desea agregar al documento. Agrega un nodo HTML a un elemento seleccionado y devuelve un identificador a ese nodo. El método text()
establece el texto del nodo seleccionado o obtiene el texto actual. Para establecer el valor, se pasa una cadena como un argumento dentro de los paréntesis del método. Aquí hay un ejemplo que selecciona una lista desordenada, agrega un elemento de lista y agrega texto: d3.seleccionar ("ul")
.append ("li")
.text ("Elemento muy importante");
D3 le permite encadenar varios métodos junto con puntos para realizar varias acciones seguidas.
## Instructions
Utilice el select
método para seleccionar el body
la etiqueta en el documento. Luego, append
una etiqueta h1
y agregue el texto "Aprendizaje D3" en el elemento h1
.
## Tests
```yml
tests:
- text: El body
debe tener un elemento h1
.
testString: 'assert($("body").children("h1").length == 1, "The body
should have one h1
element.");'
- text: El elemento h1
debe tener el texto "Aprendizaje D3" en él.
testString: 'assert($("h1").text() == "Learning D3", "The h1
element should have the text "Learning D3" in it.");'
- text: Su código debe acceder al objeto d3
.
testString: 'assert(code.match(/d3/g), "Your code should access the d3
object.");'
- text: Su código debe utilizar el método de select
.
testString: 'assert(code.match(/\.select/g), "Your code should use the select
method.");'
- text: Su código debe utilizar el método de append
.
testString: 'assert(code.match(/\.append/g), "Your code should use the append
method.");'
- text: Su código debe utilizar el método de text
.
testString: 'assert(code.match(/\.text/g), "Your code should use the text
method.");'
```
## Challenge Seed
## Solution
```js
// solution required
```