The First Domino es-419 Explainer

Explicador de El primer dominó

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() en 'transform' y el segundo argumento en '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 de inicio, domino ya tiene un atributo 'transform' y valor 'rotate()', pero están incorrectos. En este acertijo, cambiarás los números dentro de rotate() para que el domino caiga.

Para completar el acertijo, cambia los números dentro de 'rotate()' a (15 20 150).

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


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

Conceptos de JavaScript: variable

Conceptos de D3: atributo

Código adicional (código oculto que se ejecuta antes del código del acertijo):


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

}

1 Like