Explicação de Maçã podre
Objetivo deste desafio: Remover a badApple da cesta
Passo a passo da solução: A função takeOut será executada sempre que você clicar no link badApple. A função takeOut() começa a mudar a cor de badApple para verde-limão. É possível remover o .attr('fill','lime'), pois a badApple será excluída e você não verá sua cor. Em seguida, anexe a chamada .remove() a badApple dentro do bloco de código da função para obter badApple.remove(). Agora, assim que a função takeOut() for chamada, a badApple será removida.
Solução do código de exemplo:
(Toque abaixo para revelar)
function takeOut() {
badApple.remove();
}
badApple.on('click',takeOut);
Conceitos de JavaScript: Bloco de código (função)
Conceitos de D3: .on('click',...), .remove()
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]
for (let x of Array(20)) {
svg.append('circle').attr('r',30).attr('cx', 50+pickRandom(95)).attr('cy', 50+pickRandom(35)).attr('fill',`rgb(${200+pickRandom(55)},20,20)`);
}
let badApple = svg.append('circle').attr('r',30).attr('cx', 50+pickRandom(95)).attr('cy', 50+pickRandom(35)).attr('fill','maroon');
let basket = svg.append('g').attr('transform',`scale(20) translate(1,4)`).attr('stroke','grey').attr('stroke-width',0.1);
basket.append('path').attr('d','M 0 0 L 2 0 L 2.5 7 L 1 7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);
basket.append('path').attr('d','M 2 0 L 4 0 L 4 7 L 2.5 7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);
basket.append('path').attr('d','M 4 0 L 6 0 L 5.5 7 L 4 7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);
basket.append('path').attr('d','M 6 0 L 8 0 L 7 7 L 5.5 7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);
[/details]