---
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: Adicionar elementos do documento com D3
---
## Description
O D3 possui vários métodos que permitem adicionar e alterar elementos no documento. O método select()
seleciona um elemento do documento. Leva um argumento para o nome do elemento desejado e retorna um nó HTML para o primeiro elemento no documento que corresponde ao nome. Aqui está um exemplo: const anchor = d3.select("a");
O exemplo acima encontra a primeira tag âncora na página e salva um nó HTML para ela na anchor
da variável. Você pode usar a seleção com outros métodos. A parte "d3" do exemplo é uma referência ao objeto D3, que é como você acessa os métodos D3. Dois outros métodos úteis são append()
e text()
. O método append()
recebe um argumento para o elemento que você deseja adicionar ao documento. Ele anexa um nó HTML a um item selecionado e retorna um identificador para esse nó. O método text()
define o texto do nó selecionado ou obtém o texto atual. Para definir o valor, você passa uma string como um argumento dentro dos parênteses do método. Aqui está um exemplo que seleciona uma lista não ordenada, acrescenta um item de lista e adiciona texto: d3.select ("ul")
.append ("li")
.text ("Item muito importante");
O D3 permite encadear vários métodos em conjunto com períodos para executar várias ações seguidas.
## Instructions
Use o método select
para selecionar a tag body
no documento. Em seguida, append
uma tag h1
a ela e adicione o texto "Learning D3" no elemento h1
.
## Tests
```yml
tests:
- text: O body
deve ter um elemento h1
.
testString: 'assert($("body").children("h1").length == 1, "The body
should have one h1
element.");'
- text: O elemento h1
deve ter o texto "Aprendizagem D3".
testString: 'assert($("h1").text() == "Learning D3", "The h1
element should have the text "Learning D3" in it.");'
- text: Seu código deve acessar o objeto d3
.
testString: 'assert(code.match(/d3/g), "Your code should access the d3
object.");'
- text: Seu código deve usar o método select
.
testString: 'assert(code.match(/\.select/g), "Your code should use the select
method.");'
- text: Seu código deve usar o método append
.
testString: 'assert(code.match(/\.append/g), "Your code should use the append
method.");'
- text: Seu código deve usar o método de text
.
testString: 'assert(code.match(/\.text/g), "Your code should use the text
method.");'
```
## Challenge Seed
## Solution
```js
// solution required
```