The First Domino pt-br Explainer

Explicação de O primeiro dominó

Objetivo do desafio: Use o método attribute .attr() com 'transform' para girar uma forma SVG.

Passo a passo da solução: O método attribute .attr() é usado para definir ou modificar os atributos das formas SVG. São necessários dois argumentos: o nome do atributo para mudar e o valor do atributo. Para girar uma forma SVG, defina o 1º argumento de .attr() para 'transform' e o 2º argumento para 'rotate(__ __ __)' com três números dentro dos parênteses. Os números dentro de 'rotate()' representam, em ordem: graus no sentido horário para girar a forma, coordenada x da origem da rotação, coordenada y da origem da rotação.

No código com o qual você começa, o domino já tem um atributo 'transform' e um valor 'rotate()', mas eles estão incorretos. Neste desafio, você mudará os números dentro de rotate() para que o dominó tombe.

Para concluir o desafio, altere os números dentro de 'rotate()' para (15 20 150).

Solução do código de exemplo:

(Toque abaixo para revelar)


domino.attr('transform','rotate(15 20 150)');

Conceitos de JavaScript: Variável

Conceitos de D3: Atributo

Código Adicional (código oculto executado antes do código do desafio):


svg.append('rect').attr('y',150).attr('width',window.innerWidth).attr('height',10).attr('fill','brown');

var domino = svg.append('rect').attr('x',10).attr('y',70).attr('width',10).attr('height',80).attr('fill','white');

for (let i = 2; i < 20; i++) {

svg.append('rect').attr('x',20*i).attr('y',70).attr('width',10).attr('height',80).attr('fill','white');

}