Explicação de Desinfetar
Objetivo deste desafio: Remover as colônias de bactérias.
Passo a passo da solução: Você verá que se executar o código e clicar no conta-gotas, ele desaparecerá - e é isso que você quer que aconteça quando você clicar na bactéria também! Vamos ver como o conta-gotas faz isso para podermos copiá-lo para a bactéria. Existem duas funções: removeDropper e cure. removeDropper tem um comando que diz: dropper.remove() que é o código que apaga o conta-gotas da tela. A definição da função de cura está vazia, portanto você deve adicionar um comando para remover a bacteria da tela bacteria.remove();
Solução do código de exemplo:
(Toque abaixo para revelar)
function removeDropper() {
dropper.remove();
}
function cure() {
bacteria.remove();
}
dropper.on('click', removeDropper);
bacteria.on('click', cure);
Conceitos de JavaScript: Bloco de Código (função), Expressão de Membro, Identificadores
Conceitos de D3: .remove(), .on(‘click’,)
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]
for (var i=0; i<100; i++) {
svg.append('circle').attr('cx',window.innerWidth*Math.random()).attr('cy',window.innerHeight*Math.random()).attr('r',0).attr('fill','yellowgreen').transition().duration(60000).ease(d3.easeLinear).attr('r',100);
}
var bacteria = d3.selectAll('circle');
var dropper = svg.append('g').attr('transform','scale(4) translate(65 -5) rotate(45 0 0)');
var sample = dropper.append('path').attr('d','M 12 48 C 12 50 10 52 10 60 L 8 60 C8 52 6 50 6 48 Z').attr('fill','yellowgreen').attr('opacity',1);
var glass = dropper.append('path').attr('d','M 6 12 C 6 0 12 0 12 12 C 14 12 14 18 12 18 L 12 48 C 12 50 10 52 10 60 L 8 60 C8 52 6 50 6 48 L 6 18 C 4 18 4 12 6 12 Z').attr('fill','silver').attr('opacity',0.5).attr('stroke','grey').attr('stroke-width',0.2);
var rubber = dropper.append('path').attr('d','M 6 12 C 6 0 12 0 12 12 C 14 12 14 18 12 18 L 6 18 C 4 18 4 12 6 12 Z').attr('stroke','grey').attr('stroke-width',0.2);
[/details]