Explicação de Olhe para a esquerda
Objetivo deste desafio: Fazer os olhos olharem para o lado esquerdo, mudando as localizações centrais dos vários círculos.
Passo a passo da solução: Os olhos são feitos de quatro círculos: dois grandes olhos brancos e duas pequenas pupilas pretas. A localização de cada círculo é determinada pelas coordenadas de seu centro: 'cx' e 'cy'. Para mover um círculo para a direita, você aumenta seu valor 'cx'. Para mover um círculo para baixo, você aumenta seu valor 'cy'. Lembra-se da ordem em que o gafanhoto saltou? Aumentou seu valor 'x' e depois seu valor 'y'. Também é como ler um livro - aumentar x é como ler as palavras em uma linha e aumentar 'y' é como ler cada linha em uma página. Neste desafio, todos os círculos devem ser alinhados através de uma linha horizontal. Isso significa que eles estão todos à mesma distância da parte superior da tela e têm o mesmo valor 'cy' de 50. O único círculo com a colocação esquerda-direita errada é a pupila direita - ela deve ter um 'cx' de 125.
Solução do código de exemplo:
(Toque abaixo 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);
Conceitos de JavaScript: Expressão de Membro, Identificadores
Conceitos de D3: .attr(‘cx’,), .attr(‘cy’,)
Código Adicional (código oculto executado antes do código do desafio):
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);