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