---
id: 587d7fa7367417b2b2512bc4
title: Work with Data in D3
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Trabalhar com dados no D3
---
## Description
A biblioteca D3 se concentra em uma abordagem baseada em dados. Quando você tem um conjunto de dados, você pode aplicar métodos D3 para exibi-los na página. Os dados vêm em vários formatos, mas esse desafio usa uma matriz simples de números. O primeiro passo é tornar D3 ciente dos dados. O método data()
é usado em uma seleção de elementos DOM para anexar os dados a esses elementos. O conjunto de dados é passado como um argumento para o método. Um padrão de fluxo de trabalho comum é criar um novo elemento no documento para cada parte dos dados no conjunto. D3 tem o método enter()
para esse propósito. Quando enter()
é combinado com o método data()
, ele verifica os elementos selecionados da página e compara-os com o número de itens de dados no conjunto. Se houver menos elementos que itens de dados, ele criará os elementos ausentes. Aqui está um exemplo que seleciona um elemento ul
e cria um novo item de lista com base no número de entradas na matriz: <body>
<ul> </ ul>
<script>
conjunto de dados const = ["a", "b", "c"];
d3.select ("ul"). selectAll ("li")
.data (conjunto de dados)
.entrar()
.append ("li")
.text ("Novo item");
</ script>
</ body>
Pode parecer confuso selecionar elementos que ainda não existem. Este código está dizendo ao D3 para selecionar primeiro o ul
na página. Em seguida, selecione todos os itens da lista, que retornam uma seleção vazia. Em seguida, o método data()
revisa o conjunto de dados e executa o código a seguir três vezes, uma vez para cada item na matriz. O método enter()
vê que não há elementos li
na página, mas precisa de 3 (um para cada parte dos dados no dataset
). Novos elementos li
são anexados ao ul
e possuem o texto "Novo item".
## Instructions
Selecione o nó do body
, em seguida, selecione todos os elementos h2
. Faça o D3 criar e anexar uma tag h2
para cada item na matriz do dataset
. O texto no h2
deve dizer "novo título". Seu código deve usar os métodos data()
e enter()
.
## Tests
```yml
tests:
- text: Seu documento deve ter 9 elementos h2
.
testString: 'assert($("h2").length == 9, "Your document should have 9 h2
elements.");'
- text: O texto nos elementos h2
deve dizer "Novo Título". A capitalização e o espaçamento devem corresponder exatamente.
testString: 'assert($("h2").text().match(/New Title/g).length == 9, "The text in the h2
elements should say "New Title". The capitalization and spacing should match exactly.");'
- text: Seu código deve usar o método data()
.
testString: 'assert(code.match(/\.data/g), "Your code should use the data()
method.");'
- text: Seu código deve usar o método enter()
.
testString: 'assert(code.match(/\.enter/g), "Your code should use the enter()
method.");'
```
## Challenge Seed
## Solution
```js
// solution required
```