Ahead Of Your Time es-419 Explainer

Explicador de Adelantado a tu época

Objetivo de este acertijo: Girar la aguja horaria a la posición de las 3 en punto.

Tutorial de la solución: Para girar una forma, modifica el atributo 'transform'. El valor al que se define es diferente de los otros atributos; toma un string como un argumento, pero el string tiene formato parecido a una llamada de función. El string contiene tres números: la cantidad de grados que se debe girar hacia la derecha y luego las coordenadas x e y de un eje de giro. La aguja horaria comienza girada a 60 grados con respecto a la posición de medio día. Puedes ver esto en 'rotate(60 100 100)'. El centro del reloj está en la ubicación (100,100), por lo que es el punto correcto alrededor del cual girar. Cada posición horaria en la esfera del reloj tiene 30 grados de diferencia, así que se requieren 90 grados para ir del medio día a las 3 en punto. Eso significa que queremos que hourHand gire 90 grados hacia la derecha alrededor del punto central de (100,100). Pones todo esto en un string con el mismo formato que el minutero.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


clockFace.attr('cx', 100)

.attr('cy', 100);

minuteHand.attr('transform', 'rotate(5 100 100)')

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

hourHand.attr('transform', 'rotate(90 100 100)')

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

Conceptos de JavaScript: identificadores, expresión de miembro

Conceptos de D3: .attr(‘transform’,), .attr(‘fill’,)

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


var clockFace = svg.append('circle').attr('r',90).attr('fill','beige').attr('stroke','black').attr('stroke-width',1.5);

var minuteHand = svg.append('rect').attr('x',97).attr('y',20).attr('width',6).attr('height',80).attr('fill','black');

var hourHand = svg.append('rect').attr('x',96).attr('y',40).attr('width',8).attr('height',60).attr('fill','darkslategrey');