Rainbow Treasure pt-br Explainer

Explicação de Tesouro do arco-íris

Objetivo deste desafio: Fazer o pote preto virar ouro quando você tocar nele.
Passo a passo da solução: A mudança que você precisa fazer para resolver esse desafio é muito simples: basta mudar a string 'black' para 'gold' e a string 'rect' para 'circle'. Mas vamos ver por que essas são as mudanças certas a serem feitas. A variável firstCircle deve estar armazenando o 1º círculo desenhado na tela. O código d3.select() procura na tela o 1º objeto adicionado que tem uma determinada forma. Como é necessário selecionar um círculo, você muda 'rect' para 'circle'. O próximo conjunto de códigos é uma função que deve transformar o pote em ouro. A parte principal a ser analisada é o .attr() porque é aí que a propriedade de cor é alterada. Definir o atributo 'fill' para a string 'gold' é tudo o que você precisa fazer. Agora, quando a função turnToGold for executada, ela pegará o firstCircle e fará a transição de sua cor para o dourado! A última parte do código é onde o programa detecta quando você toca o círculo e executa o código dentro da função turnToGold.
Solução do código de exemplo:
(Toque abaixo para revelar)

var firstCircle = d3.select('circle');

function turnToGold() {
  firstCircle.transition()
    .attr('fill', 'gold');
}

firstCircle.on('click', turnToGold);

Conceitos de JavaScript: Bloco de Código (função), Identificadores, Expressão de Membro, Declaração de Variável
Conceitos de D3: .select(), .transition(), .attr(‘fill’,), .on(‘click’,)
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

var colors = ['black','red','orange','yellow','green','blue','purple','violet'];
var x = 0;
var y = 0;

for (var i=0; i<colors.length; i++) {
    x = window.innerWidth/2 - 70*Math.cos(Math.PI*i/(colors.length-1)); // 400/2...
    y = window.innerHeight/2 - 70*Math.sin(Math.PI*i/(colors.length-1)) + 30; // 250/2...
    svg.append('circle').attr('fill',colors[i]).attr('r',35).attr('cx',x).attr('cy',y);
}

[/details]

1 Like