freeCodeCamp

7.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fab367417b2b2512bd8	Add Attributes to the Circle Elements	6		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

tests:
  - text: Seu código deve ter 10 elementos de <code>circle</code> .
    testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
  - text: 'O primeiro elemento de <code>circle</code> deve ter um valor de <code>cx</code> de 34, um valor de <code>cy</code> de 422 e um valor de <code>r</code> de 5.'
    testString: 'assert($("circle").eq(0).attr("cx") == "34" && $("circle").eq(0).attr("cy") == "422" && $("circle").eq(0).attr("r") == "5", "The first <code>circle</code> element should have a <code>cx</code> value of 34, a <code>cy</code> value of 422, and an <code>r</code> value of 5.");'
  - text: 'O segundo elemento <code>circle</code> deve ter um valor de <code>cx</code> de 109, um valor de <code>cy</code> de 220 e um valor de <code>r</code> de 5.'
    testString: 'assert($("circle").eq(1).attr("cx") == "109" && $("circle").eq(1).attr("cy") == "220" && $("circle").eq(1).attr("r") == "5", "The second <code>circle</code> element should have a <code>cx</code> value of 109, a <code>cy</code> value of 220, and an <code>r</code> value of 5.");'
  - text: 'O terceiro elemento de <code>circle</code> deve ter um valor de <code>cx</code> de 310, um valor de <code>cy</code> de 380 e um valor de <code>r</code> de 5.'
    testString: 'assert($("circle").eq(2).attr("cx") == "310" && $("circle").eq(2).attr("cy") == "380" && $("circle").eq(2).attr("r") == "5", "The third <code>circle</code> element should have a <code>cx</code> value of 310, a <code>cy</code> value of 380, and an <code>r</code> value of 5.");'
  - text: 'O quarto elemento <code>circle</code> deve ter um valor <code>cx</code> de 79, um valor <code>cy</code> de 89 e um valor <code>r</code> de 5.'
    testString: 'assert($("circle").eq(3).attr("cx") == "79" && $("circle").eq(3).attr("cy") == "89" && $("circle").eq(3).attr("r") == "5", "The fourth <code>circle</code> element should have a <code>cx</code> value of 79, a <code>cy</code> value of 89, and an <code>r</code> value of 5.");'
  - text: 'O quinto elemento <code>circle</code> deve ter um valor <code>cx</code> de 420, um valor <code>cy</code> de 280 e um valor <code>r</code> de 5.'
    testString: 'assert($("circle").eq(4).attr("cx") == "420" && $("circle").eq(4).attr("cy") == "280" && $("circle").eq(4).attr("r") == "5", "The fifth <code>circle</code> element should have a <code>cx</code> value of 420, a <code>cy</code> value of 280, and an <code>r</code> value of 5.");'
  - text: 'O sexto elemento <code>circle</code> deve ter um valor <code>cx</code> de 233, um valor <code>cy</code> de 355 e um valor <code>r</code> de 5.'
    testString: 'assert($("circle").eq(5).attr("cx") == "233" && $("circle").eq(5).attr("cy") == "355" && $("circle").eq(5).attr("r") == "5", "The sixth <code>circle</code> element should have a <code>cx</code> value of 233, a <code>cy</code> value of 355, and an <code>r</code> value of 5.");'
  - text: 'O sétimo elemento <code>circle</code> deve ter um valor <code>cx</code> de 333, um valor <code>cy</code> de 404 e um valor <code>r</code> de 5.'
    testString: 'assert($("circle").eq(6).attr("cx") == "333" && $("circle").eq(6).attr("cy") == "404" && $("circle").eq(6).attr("r") == "5", "The seventh <code>circle</code> element should have a <code>cx</code> value of 333, a <code>cy</code> value of 404, and an <code>r</code> value of 5.");'
  - text: 'O oitavo elemento de <code>circle</code> deve ter um valor de <code>cx</code> de 222, um valor de <code>cy</code> de 167 e um valor de <code>r</code> de 5.'
    testString: 'assert($("circle").eq(7).attr("cx") == "222" && $("circle").eq(7).attr("cy") == "167" && $("circle").eq(7).attr("r") == "5", "The eighth <code>circle</code> element should have a <code>cx</code> value of 222, a <code>cy</code> value of 167, and an <code>r</code> value of 5.");'
  - text: 'O nono elemento <code>circle</code> deve ter um valor de <code>cx</code> de 78, um valor de <code>cy</code> de 180 e um valor de <code>r</code> de 5.'
    testString: 'assert($("circle").eq(8).attr("cx") == "78" && $("circle").eq(8).attr("cy") == "180" && $("circle").eq(8).attr("r") == "5", "The ninth <code>circle</code> element should have a <code>cx</code> value of 78, a <code>cy</code> value of 180, and an <code>r</code> value of 5.");'
  - text: 'O décimo elemento de <code>circle</code> deve ter um valor de <code>cx</code> de 21, um valor de <code>cy</code> de 377 e um valor de <code>r</code> de 5.'
    testString: 'assert($("circle").eq(9).attr("cx") == "21" && $("circle").eq(9).attr("cy") == "377" && $("circle").eq(9).attr("r") == "5", "The tenth <code>circle</code> element should have a <code>cx</code> value of 21, a <code>cy</code> value of 377, and an <code>r</code> value of 5.");'

Challenge Seed

<body>
  <script>
    const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];


    const w = 500;
    const h = 500;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       // Add your code below this line



       // Add your code above this line

  </script>
</body>

Solution

// solution required

7.5 KiB Raw Blame History