Green Blue Red es-419 Explainer

Explicador de Verde azul rojo

Objetivo de este acertijo:

Usar el método .remove() para eliminar una forma SVG.

Tutorial de la solución:

El método .remove() elimina una forma SVG. Para usarla, agrega .remove() al final de la forma que quieres eliminar.

En el código de inicio, hay una función, removeRed, y un controlador de eventos que llama a removeRed cuando se pulsa. La función removeRed está incompleta, así que no sucede nada cuando pulsas red. En este acertijo, actualizarás la función removeRed, así que cuando pulses red, desaparecerá.

Para completar el acertijo, adjunta .remove() al final de la variable red dentro de la función removeRed. Ahora, cada vez que pulses red, la función removeRed se ejecutará y red se eliminará.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


function removeRed() {

red.remove();

}

red.on('click', removeRed);

Conceptos de JavaScript: variable, declaración de la función, controlador de eventos

Conceptos de D3: .remove()

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


var svg = canvas.append('g');

svg.attr('transform',`translate(${window.innerWidth/2},${window.innerHeight/2})`);

let red = svg.append('rect').attr('fill', 'rgb(241,37,2)').attr('height', '190').attr('width', '240').attr('x', -120).attr('y', -100)

let blue = svg.append('ellipse').attr('fill', 'rgb(0,114,203)').attr('rx', 50).attr('ry', 80).attr('cx', 69).attr('cy', -5)

let green = svg.append('rect').attr('fill', 'rgb(1,161,35)').attr('height', '160').attr('width', '80').attr('x', -115).attr('y',-85)

1 Like