--- 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
```html ```
## Solution
```js // solution required ```