Look To The Left pt-br Explainer

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);