Ahead Of Your Time pt-br Explainer

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');
1 Like