--- id: 587d7fa8367417b2b2512bcd title: Create a Bar for Each Data Point in the Set 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
```html ```
## Solution
```js // solution required ```