Gooooal es-419 Explainer

Explicador de Goooool

Objetivo de este acertijo: Mover ball a goal

Tutorial de la solución: La posición de un círculo se define por su centro. La distancia desde el lado izquierdo de la pantalla hasta el centro es su atributo 'cx'. La distancia desde la parte superior de la pantalla hasta el centro del círculo es su atributo 'cy'.

ball debe estar entre los lados izquierdo y derecho de goal si su 'cx' es entre 50 y 200. Elijamos 125. Para definir el atributo 'cx' de ball, debes usar ball.attr('cx',...). Para 'cy', el valor debe ser entre 50 y 100. Usemos 100. ball.attr('cy',100) definirá ball a lo largo del extremo más inferior de goal.

Se puede encadenar las llamadas .attr(), o directamente a ball en una nueva línea. Cualquiera de las dos opciones funcionará, siempre y cuando no intentes usar ball.attr() arriba de let ball = ..., ya que la variable debe crearse antes de que se use.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


let goal = svg.append('rect')

.attr('x', 25)

.attr('y', 25)

.attr('width', 200)

.attr('height', 100)

.attr('fill', 'white');

let ball = svg.append('circle')

.attr('r', 25)

.attr('fill', 'dodgerblue');

ball.attr('cx', 125)

.attr('cy', 100);

Conceptos de D3: .append(), .attr('cx',), .attr('cy',), .attr('fill',), .attr('height',), .attr(r,), .attr('width',), .attr('x',), .attr('y',), .on('click',...)