---
id: 587d7fa8367417b2b2512bcd
title: Create a Bar for Each Data Point in the Set
localeTitle: Crear una barra para cada punto de datos en el conjunto
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
---
## Description
El último desafío agregó solo un rectángulo al elemento svg
para representar una barra. Aquí, combinará lo que ha aprendido hasta ahora acerca de las formas de data()
, enter()
y SVG para crear y anexar un rectángulo para cada punto de dataset
en el dataset
de dataset
.
Un desafío anterior mostró el formato de cómo crear y anexar un div
para cada elemento en el dataset
de dataset
:
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
Hay algunas diferencias que trabajan con elementos rect
lugar de divs
. Los rects
deben adjuntarse a un elemento svg
, no directamente al body
. Además, debe indicar a D3 dónde colocar cada rect
dentro del área de svg
. La colocación de la barra será cubierta en el próximo desafío.
## Instructions
Use los métodos data()
, enter()
y append()
para crear y adjuntar un rect
para cada elemento en el dataset
de dataset
. Las barras deben mostrar todas una encima de la otra, esto se solucionará en el próximo desafío.
## Tests
```yml
tests:
- text: Su documento debe tener 9 elementos rect
.
testString: 'assert($("rect").length == 9, "Your document should have 9 rect
elements.");'
- text: Su código debe utilizar el método data()
.
testString: 'assert(code.match(/\.data/g), "Your code should use the data()
method.");'
- text: Su código debe utilizar el método enter()
.
testString: 'assert(code.match(/\.enter/g), "Your code should use the enter()
method.");'
- text: Su código debe utilizar el método append()
.
testString: 'assert(code.match(/\.append/g), "Your code should use the append()
method.");'
```
## Challenge Seed
## Solution
```js
// solution required
```