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