--- id: 587d7fa6367417b2b2512bc2 title: Add Document Elements with D3 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
```html ```
## Solution
```js // solution required ```