---
id: 587d7fa8367417b2b2512bcd
title: Create a Bar for Each Data Point in the Set
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Crie uma barra para cada ponto de dados no conjunto
---
## Description
O último desafio adicionou apenas um retângulo ao elemento svg
para representar uma barra. Aqui, você combinará o que aprendeu até agora sobre formas data()
, enter()
e SVG para criar e anexar um retângulo para cada ponto de dados no dataset
. Um desafio anterior mostrou o formato de como criar e anexar um div
para cada item no dataset
: d3.select ("body"). selectAll ("div")
.data (conjunto de dados)
.entrar()
.append ("div")
Existem algumas diferenças trabalhando com elementos rect
vez de divs
. Os rects
devem ser anexados a um elemento svg
, não diretamente ao body
. Além disso, você precisa dizer ao D3 onde colocar cada rect
dentro da área svg
. O posicionamento da barra será coberto no próximo desafio.
## Instructions
Use os métodos data()
, enter()
e append()
para criar e anexar um rect
para cada item no dataset
. As barras devem exibir todas em cima umas das outras, isso será corrigido no próximo desafio.
## Tests
```yml
tests:
- text: Seu documento deve ter 9 elementos rect
.
testString: 'assert($("rect").length == 9, "Your document should have 9 rect
elements.");'
- 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.");'
- text: Seu código deve usar o método append()
.
testString: 'assert(code.match(/\.append/g), "Your code should use the append()
method.");'
```
## Challenge Seed
## Solution
```js
// solution required
```