Stage Fright pt-br Explainer

Explicação de Medo de palco

Objetivo deste desafio: Fazer a transição do círculo para o vermelho quando você tocar nele.

Passo a passo da solução: Se você executar o código inicial, verá que curtain se eleva quando você toca nela. Na verdade, ela está mudando a altura do retângulo. É preciso fazer algo semelhante com performer - ele deve misturar sua cor com o vermelho quando você clica nele. A parte curtain.on('click',...) esperará que você clique na cortina e então executará uma função - neste caso, uma função de seta. É possível copiar o comando para curtain e apenas mudar o identificador (curtain para performer). Depois é preciso mudar o atributo que está mudando, de ‘height’ para ‘fill’. Basta lembrar de fazer o artista ficar ‘red’ ou pelo menos algum tom de vermelho.

Solução do código de exemplo:
(Toque abaixo para revelar)

curtain.on('click', () => {
  curtain.transition()
           .attr('height', 25)
           .duration(1000);
});

performer.on('click', () => {
  performer.transition()
             .attr('fill', 'tomato')
             .duration(1000);
});

Conceitos de JavaScript: Bloco de Código (função de seta), Expressão de Membro, Identificadores
Conceitos de D3: .attr(‘altura’,), .attr(‘preenchimento’,), .duração(), .transição(), .on(‘clique’,)
Código Adicional (código oculto executado antes do código do desafio):

var rg = pickRandom(255);

var color = 'rgb('+rg+','+rg+','+(255-pickRandom(10))+')';

var performer = svg.append('circle').attr('fill',color).attr('cx', 100).attr('cy',150).attr('r',30);

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

var curtain = stage.append('rect').attr('fill', 
'orangered').attr('x',0).attr('y',0).attr('height',175).attr('width',200);

var folds = 10;
for (var i=0; i< folds; i++) {
    stage.append('rect').attr('width',5).attr('height',175).attr('x',i*200/folds).attr('fill','red');
}

stage.append('rect').attr('width',200).attr('height',5).attr('y',175).attr('fill','gold');

stage.on('click',()=>{
    stage.selectAll('rect').filter('[fill=red]').transition().attr('transform','scale(1 0.14286)').duration(1000);
    stage.selectAll('rect').filter('[fill=gold]').transition().attr('y',25).duration(1000);
    curtain.transition().attr('height',25).duration(1000);
});

Não está funcionando, diz que eu desfiz o código e pra eu refazer tudo… inclusive fiz IGUAL a solução e mesmo assim não funcionou.

O meu passou assim:

Curtain.on(‘click’,()=>{
Curtain.transition().attr(‘height’, 25).duration(1000);});
Performer.on(‘click’, ()=>{
performer.tansition().attr( ’ fill’, ’ red’).
duration(1000);
};