---
id: 587d7fa9367417b2b2512bce
title: Dynamically Set the Coordinates for Each Bar
challengeType: 6
videoUrl: ''
localeTitle: Establecer dinámicamente las coordenadas para cada barra
---
## Description
El último desafío creó y agregó un rectángulo al elemento svg
para que cada punto en el dataset
de dataset
represente una barra. Desafortunadamente, todos estaban apilados uno encima del otro. La colocación de un rectángulo es manejada por los atributos x
e y
. Le dicen a D3 dónde comenzar a dibujar la forma en el área de svg
. El último desafío los puso a 0, por lo que cada barra se colocó en la esquina superior izquierda. Para un gráfico de barras, todas las barras deben estar en el mismo nivel vertical, lo que significa que el valor de y
permanece igual (en 0) para todas las barras. El valor x
, sin embargo, debe cambiar a medida que agrega nuevas barras. Recuerde que los valores de x
más grandes empujan los elementos más hacia la derecha. A medida que recorre los elementos de la matriz en el dataset
de dataset
, el valor de x debería aumentar. El método attr()
en D3 acepta una función de devolución de llamada para establecer dinámicamente ese atributo. La función de devolución de llamada toma dos argumentos, uno para el punto de datos en sí (generalmente d
) y otro para el índice del punto de datos en la matriz. El segundo argumento para el índice es opcional. Aquí está el formato: selection.attr ("propiedad", (d, i) => {
/ *
* d es el valor del punto de datos
* i es el índice del punto de datos en la matriz
* /
})
Es importante tener en cuenta que NO es necesario escribir un bucle for
o usar forEach()
para iterar sobre los elementos del conjunto de datos. Recuerde que el método data()
analiza el conjunto de datos, y cualquier método que se encadene después de que data()
se ejecute una vez para cada elemento en el conjunto de datos.
## Instructions
Cambie la función de devolución de llamada del atributo x
para que devuelva el índice por 30. Nota
Cada barra tiene un ancho de 25, por lo que al aumentar cada valor x
en 30 se agrega algo de espacio entre las barras. Cualquier valor mayor que 25 funcionaría en este ejemplo.
## Tests
```yml
tests:
- text: El primer rect
debe tener un valor x
de 0.
testString: 'assert($("rect").eq(0).attr("x") == "0", "The first rect
should have an x
value of 0.");'
- text: El segundo rect
debe tener un valor de x
de 30.
testString: 'assert($("rect").eq(1).attr("x") == "30", "The second rect
should have an x
value of 30.");'
- text: El tercer rect
debe tener un valor de x
de 60.
testString: 'assert($("rect").eq(2).attr("x") == "60", "The third rect
should have an x
value of 60.");'
- text: El cuarto rect
debe tener un valor de x
de 90.
testString: 'assert($("rect").eq(3).attr("x") == "90", "The fourth rect
should have an x
value of 90.");'
- text: El quinto rect
debe tener un valor de x
de 120.
testString: 'assert($("rect").eq(4).attr("x") == "120", "The fifth rect
should have an x
value of 120.");'
- text: El sexto rect
debe tener un valor de x
de 150.
testString: 'assert($("rect").eq(5).attr("x") == "150", "The sixth rect
should have an x
value of 150.");'
- text: El séptimo rect
debe tener un valor de x
de 180.
testString: 'assert($("rect").eq(6).attr("x") == "180", "The seventh rect
should have an x
value of 180.");'
- text: El octavo rect
debe tener un valor de x
de 210.
testString: 'assert($("rect").eq(7).attr("x") == "210", "The eighth rect
should have an x
value of 210.");'
- text: El noveno rect
debe tener un valor de x
de 240.
testString: 'assert($("rect").eq(8).attr("x") == "240", "The ninth rect
should have an x
value of 240.");'
```
## Challenge Seed
## Solution
```js
// solution required
```