Wrecking Ball pt-br Explainer

Explicação do Bola de demolição

Objetivo do desafio: Usar 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() como 'transform' e o 2º argumento como '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 wreckingBall já tem um atributo 'transform' e um valor 'rotate()', mas eles estão incorretos. Neste desafio, você vai mudar os números dentro de 'rotate()' para balançar a wreckingBall na parede.

Para concluir o desafio, altere o ângulo de rotação atualizando o 1º número dentro de 'rotate()' para -10.

Solução do código de exemplo:

(Toque abaixo para revelar)


wreckingBall.attr('transform','rotate(-10 150 0)');

Conceitos de JavaScript: Variável

Conceitos de D3: Atributo

Código Adicional:


svg.append('rect').attr('width',window.innerWidth-150).attr('height',window.innerHeight).attr('x',200).attr('fill','slategray');

let wreckingBall = svg.append('g');

wreckingBall.append('line').attr('x1',150).attr('y1',0).attr('x2',150).attr('y2',200).attr('stroke-width',5).attr('stroke','silver');

wreckingBall.append('circle').attr('r',30).attr('cx',150).attr('cy',200).attr('fill','black');

svg.append('circle').attr('r',10).attr('cx',150).attr('fill','grey');