Look To The Left es-419 Explainer

Explicador de Mira a la izquierda

Objetivo de este acertijo: Hacer que los ojos saltones miren hacia la izquierda cambiando las ubicaciones centrales de varios círculos.

Tutorial de la solución: Los ojos están formados por cuatro círculos: dos ojos blancos grandes y dos pupilas negras pequeñas. La ubicación de cada círculo se determina por las coordenadas de su centro: 'cx' y 'cy'. Para mover un círculo hacia la derecha, debes aumentar su valor 'cx'. Para mover el círculo hacia abajo, debes aumentar su valor 'cy'. ¿Recuerdas el orden en que salió el saltamontes? Aumentó su valor 'x' y luego su valor 'y'. También es como leer un libro: aumentar x es como leer las palabras en una línea, y aumentar y es como leer cada línea en una página. En este acertijo, todos los círculos se deben alinear en una línea horizontal. Eso significa que todos están a la misma distancia de la parte superior de la pantalla y tienen el mismo valor 'cy' de 50. El único círculo con la ubicación izquierda-derecha incorrecta es la pupila derecha, debe tener un 'cx' de 125.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


leftEye.attr('cx', 50)

.attr('cy', 50);

rightEye.attr('cx', 150)

.attr('cy', 50);

leftPupil.attr('cx', 25)

.attr('cy', 50);

rightPupil.attr('cx', 125)

.attr('cy', 50);

Conceptos de JavaScript: expresión de miembro, identificadores

Conceptos de D3: .attr(‘cx’,), .attr(‘cy’,)

Código adicional (código oculto que se ejecuta antes del código del acertijo):


var leftEye = svg.append('circle').attr('stroke','grey');

var rightEye = svg.append('circle').attr('stroke','grey');

var leftPupil = svg.append('circle');

var rightPupil = svg.append('circle');

leftEye.attr('fill','white').attr('r',50);

rightEye.attr('fill','white').attr('r',50);

leftPupil.attr('fill','black').attr('r',20);

rightPupil.attr('fill','black').attr('r',20);

leftEye

.

attr

(

‘cx’

,

50

)

.

attr

(

‘cy’

,

50

)

;

rightEye

.

attr

(

‘cx’

,

150

)

.

attr

(

‘cy’

,

50

)

;

leftPupil

.

attr

(

‘cx’

,

25

)

.

attr

(

‘cy’

,

50

)

;

rightPupil

.

attr

(

‘cx’

,

125 edit

)

.

attr

(

‘cy’

,

50

)

;