---
id: 587d7fab367417b2b2512bd8
title: Add Attributes to the Circle Elements
localeTitle: Añadir atributos a los elementos del círculo
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
---
## Description
El último desafío creó los elementos del circle
para cada punto en el dataset
y los anexó al lienzo de SVG. Pero D3 necesita más información sobre la posición y el tamaño de cada circle
para mostrarlos correctamente.
Un circle
en SVG tiene tres atributos principales. Los atributos cx
y cy
son las coordenadas. Le dicen a D3 dónde colocar el centro de la forma en el lienzo de SVG. El radio (atributo r
) da el tamaño del circle
.
Al igual que la coordenada rect
y
, el atributo cy
para un circle
se mide desde la parte superior del lienzo SVG, no desde la parte inferior.
Los tres atributos pueden usar una función de devolución de llamada para establecer sus valores dinámicamente. Recuerde que todos los métodos encadenados después de los data(dataset)
ejecutan una vez por elemento en el dataset
de dataset
. El parámetro d
en la función de devolución de llamada se refiere al elemento actual en el dataset
de dataset
, que es una matriz para cada punto. Utiliza la notación de corchete, como d[0]
, para acceder a los valores de esa matriz.
## Instructions
Agregue los atributos cx
, cy
y r
a los elementos del circle
. El valor cx
debe ser el primer número en la matriz para cada elemento en el dataset
de dataset
. El valor cy
debe basarse en el segundo número de la matriz, pero asegúrese de mostrar el gráfico hacia arriba y no invertido. El valor r
debe ser 5 para todos los círculos.
## Tests
```yml
tests:
- text: Tu código debe tener 10 elementos circle
.
testString: 'assert($("circle").length == 10, "Your code should have 10 circle
elements.");'
- text: 'El primer elemento del circle
debe tener un valor cx
de 34, un valor cy
de 422 y un valor r
de 5.'
testString: 'assert($("circle").eq(0).attr("cx") == "34" && $("circle").eq(0).attr("cy") == "422" && $("circle").eq(0).attr("r") == "5", "The first circle
element should have a cx
value of 34, a cy
value of 422, and an r
value of 5.");'
- text: 'El segundo elemento del circle
debe tener un valor cx
de 109, un valor cy
de 220 y un valor r
de 5.'
testString: 'assert($("circle").eq(1).attr("cx") == "109" && $("circle").eq(1).attr("cy") == "220" && $("circle").eq(1).attr("r") == "5", "The second circle
element should have a cx
value of 109, a cy
value of 220, and an r
value of 5.");'
- text: 'El tercer elemento del circle
debe tener un valor cx
de 310, un valor cy
de 380 y un valor r
de 5.'
testString: 'assert($("circle").eq(2).attr("cx") == "310" && $("circle").eq(2).attr("cy") == "380" && $("circle").eq(2).attr("r") == "5", "The third circle
element should have a cx
value of 310, a cy
value of 380, and an r
value of 5.");'
- text: 'El cuarto elemento del circle
debe tener un valor cx
de 79, un valor cy
de 89 y un valor r
de 5.'
testString: 'assert($("circle").eq(3).attr("cx") == "79" && $("circle").eq(3).attr("cy") == "89" && $("circle").eq(3).attr("r") == "5", "The fourth circle
element should have a cx
value of 79, a cy
value of 89, and an r
value of 5.");'
- text: 'El quinto elemento del circle
debe tener un valor cx
de 420, un valor cy
de 280 y un valor r
de 5.'
testString: 'assert($("circle").eq(4).attr("cx") == "420" && $("circle").eq(4).attr("cy") == "280" && $("circle").eq(4).attr("r") == "5", "The fifth circle
element should have a cx
value of 420, a cy
value of 280, and an r
value of 5.");'
- text: 'El elemento del sexto circle
debe tener un valor cx
de 233, un valor cy
de 355 y un valor r
de 5.'
testString: 'assert($("circle").eq(5).attr("cx") == "233" && $("circle").eq(5).attr("cy") == "355" && $("circle").eq(5).attr("r") == "5", "The sixth circle
element should have a cx
value of 233, a cy
value of 355, and an r
value of 5.");'
- text: 'El elemento del séptimo circle
debe tener un valor cx
de 333, un valor cy
de 404 y un valor r
de 5.'
testString: 'assert($("circle").eq(6).attr("cx") == "333" && $("circle").eq(6).attr("cy") == "404" && $("circle").eq(6).attr("r") == "5", "The seventh circle
element should have a cx
value of 333, a cy
value of 404, and an r
value of 5.");'
- text: 'El elemento del octavo circle
debe tener un valor cx
de 222, un valor cy
de 167 y un valor r
de 5.'
testString: 'assert($("circle").eq(7).attr("cx") == "222" && $("circle").eq(7).attr("cy") == "167" && $("circle").eq(7).attr("r") == "5", "The eighth circle
element should have a cx
value of 222, a cy
value of 167, and an r
value of 5.");'
- text: 'El elemento del noveno circle
debe tener un valor cx
de 78, un valor cy
de 180 y un valor r
de 5.'
testString: 'assert($("circle").eq(8).attr("cx") == "78" && $("circle").eq(8).attr("cy") == "180" && $("circle").eq(8).attr("r") == "5", "The ninth circle
element should have a cx
value of 78, a cy
value of 180, and an r
value of 5.");'
- text: 'El elemento del décimo circle
debe tener un valor cx
de 21, un valor cy
de 377 y un valor r
de 5.'
testString: 'assert($("circle").eq(9).attr("cx") == "21" && $("circle").eq(9).attr("cy") == "377" && $("circle").eq(9).attr("r") == "5", "The tenth circle
element should have a cx
value of 21, a cy
value of 377, and an r
value of 5.");'
```
## Challenge Seed
## Solution
```js
// solution required
```