freeCodeCamp

7.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fab367417b2b2512bd8	Add Attributes to the Circle Elements	6		Añadir atributos a los elementos del círculo

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 el rect y coordinar, el cy atributo para un circle se mide desde la parte superior del lienzo SVG, no de abajo. 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

tests:
  - text: Tu código debe tener 10 elementos <code>circle</code> .
    testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
  - text: 'El primer elemento del <code>circle</code> debe tener un valor <code>cx</code> de 34, un valor <code>cy</code> de 422 y un valor <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: 'El segundo elemento del <code>circle</code> debe tener un valor de <code>cx</code> de 109, un valor de <code>cy</code> de 220 y un 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: 'El tercer elemento del <code>circle</code> debe tener un valor <code>cx</code> de 310, un valor <code>cy</code> de 380 y un valor <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: 'El cuarto elemento del <code>circle</code> debe tener un valor <code>cx</code> de 79, un valor <code>cy</code> de 89 y un 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: 'El quinto elemento del <code>circle</code> debe tener un valor <code>cx</code> de 420, un valor <code>cy</code> de 280 y un 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: 'El elemento del sexto <code>circle</code> debe tener un valor <code>cx</code> de 233, un valor <code>cy</code> de 355 y un 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: 'El elemento del séptimo <code>circle</code> debe tener un valor <code>cx</code> de 333, un valor <code>cy</code> de 404 y un 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: 'El elemento del octavo <code>circle</code> debe tener un valor <code>cx</code> de 222, un valor <code>cy</code> de 167 y un valor <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: 'El noveno elemento del <code>circle</code> debe tener un valor <code>cx</code> de 78, un valor <code>cy</code> de 180 y un valor <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: 'El elemento del décimo <code>circle</code> debe tener un valor <code>cx</code> de 21, un valor <code>cy</code> de 377 y un valor <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.6 KiB Raw Blame History