Explicação de À frente do seu tempo
Objetivo deste desafio: Girar o ponteiro das horas até a posição de 3 horas.
Passo a passo da solução: Para girar uma forma, você modifica o atributo 'transform'. O valor ao qual é definido é diferente dos outros atributos - ele pega uma string como argumento, mas a string é formatada de uma forma que pareça uma chamada de função. A string tem três números: o número de graus a girar no sentido horário e depois as coordenadas x e y de um ponto de giro. O ponteiro das horas começa a girar 60 graus a partir da posição do meio-dia. É possível ver isso em 'rotate(60 100 100)'. O centro do relógio fica no local (100,100), de modo que é o ponto correto ao redor do qual deve girar. Cada posição horária no mostrador do relógio tem um intervalo de 30 graus, portanto, para chegar do meio-dia até as 3 horas são 90 graus. Isso significa que é necessário que o hourHand gire 90 graus no sentido horário em torno do ponto central de (100,100). Você põe tudo isso em uma string com a mesma formatação do ponteiro de minutos.
Solução do código de exemplo:
(Toque abaixo 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');
Conceitos de JavaScript: Identificadores, expressão de membro
*Conceitos de D3: .attr(‘transform’,), .attr(‘fill’,)
Código Adicional (código oculto executado antes do código do desafio):
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');