---
id: 587d7fab367417b2b2512bd8
title: Add Attributes to the Circle Elements
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Adicionar atributos aos elementos do círculo
---
## Description
O último desafio criou os elementos do circle
para cada ponto no dataset
e os anexou à tela do SVG. Mas o D3 precisa de mais informações sobre a posição e o tamanho de cada circle
para exibi-los corretamente. Um circle
no SVG tem três atributos principais. Os atributos cx
e cy
são as coordenadas. Eles dizem ao D3 onde posicionar o centro da forma na tela do SVG. O raio (atributo r
) fornece o tamanho do circle
. Assim como o rect
y
coordenar, o cy
atributo para um circle
é medido a partir do topo da tela SVG, não de baixo. Todos os três atributos podem usar uma função de retorno de chamada para definir seus valores dinamicamente. Lembre-se de que todos os métodos encadeados após data(dataset)
executados uma vez por item no dataset
. O parâmetro d
na função de retorno de chamada se refere ao item atual no dataset
, que é uma matriz para cada ponto. Você usa a notação de colchetes, como d[0]
, para acessar os valores nessa matriz.
## Instructions
Adicione os atributos cx
, cy
e r
aos elementos do circle
. O valor cx
deve ser o primeiro número da matriz para cada item no dataset
. O valor cy
deve ser baseado no segundo número do array, mas certifique-se de mostrar o gráfico com o lado direito para cima e não invertido. O valor de r
deve ser 5 para todos os círculos.
## Tests
```yml
tests:
- text: Seu código deve ter 10 elementos de circle
.
testString: 'assert($("circle").length == 10, "Your code should have 10 circle
elements.");'
- text: 'O primeiro elemento de circle
deve ter um valor de cx
de 34, um valor de cy
de 422 e um valor de 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: 'O segundo elemento circle
deve ter um valor de cx
de 109, um valor de cy
de 220 e um valor de 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: 'O terceiro elemento de circle
deve ter um valor de cx
de 310, um valor de cy
de 380 e um valor de 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: 'O quarto elemento circle
deve ter um valor cx
de 79, um valor cy
de 89 e um 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: 'O quinto elemento circle
deve ter um valor cx
de 420, um valor cy
de 280 e um 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: 'O sexto elemento circle
deve ter um valor cx
de 233, um valor cy
de 355 e um 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: 'O sétimo elemento circle
deve ter um valor cx
de 333, um valor cy
de 404 e um 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: 'O oitavo elemento de circle
deve ter um valor de cx
de 222, um valor de cy
de 167 e um valor de 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: 'O nono elemento circle
deve ter um valor de cx
de 78, um valor de cy
de 180 e um valor de 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: 'O décimo elemento de circle
deve ter um valor de cx
de 21, um valor de cy
de 377 e um valor de 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
```