Wrecking Ball es-419 Explainer

Explicador de Bola de demolición

Objetivo de este acertijo:

Usar el método de atributo .attr() con 'transform' para girar una forma SVG.

Tutorial de la solución:

El método de atributo .attr() se usa para definir o modificar los atributos de formas SVG. Toma dos argumentos: el nombre del atributo para cambiar y el valor del atributo. Para girar una forma SVG, define el primer argumento de .attr() como 'transform' y el segundo argumento como'rotate(__ __ __)' con tres números dentro del paréntesis. Los números dentro de 'rotate()' representan, en orden: grados hacia la derecha que se girará la forma, coordenada x del origen de la rotación, coordenada y del origen de la rotación.

En el código con el que comienzas, wreckingBall ya tiene un atributo 'transform' y valor 'rotate()', pero están incorrectos. En este acertijo, cambiarás los números dentro de 'rotate()' para mover wreckingBall hacia la pared.

Para completar el acertijo, cambia el ángulo de la rotación actualizando el primer número dentro de 'rotate()' a -10.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


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

Conceptos de JavaScript: variable

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

1 Like