Explicação de Saltador de arco-íris
Objetivo deste desafio: Fazer o gafanhoto pular e criar um arco-íris de quadrados.
Passo a passo da solução: Quando você executar o código, verá apenas um quadrado violeta - isso porque todos os retângulos são desenhados uns sobre os outros no mesmo local: x=0, y=50. O que você gostaria é que o valor x fosse diferente para cada um deles. Para isso, mude .attr('x', 0) para .attr('x', location) para que cada quadrado seja ajustado para o valor da variável location. Se você executar o código agora, ele ainda não funciona! Isso porque location é sempre igual a zero. Dentro do laço, o valor location deve aumentar após cada quadrado ser desenhado. Deve aumentar em 30 cada vez, pois essa é a largura de cada quadrado. Portanto, depois do comando para adicionar um quadrado você precisa adicionar: location = location + 30; que pega o valor atual de location, adiciona 30 e então armazena a resposta de volta dentro da variável location. Se você executar o código agora, os quadrados serão desenhados em ordem! Só mais uma coisa: o gafanhoto precisa pular. Tudo que você precisa fazer é chamar a função jump() em algum lugar dentro da função drawSquare.
Solução do código de exemplo:
(Toque abaixo para revelar)
var location = 0;
function drawSquare(color) {
svg.append('rect')
.transition()
.delay(17*location)
.attr('width', 30)
.attr('height', 30)
.attr('x', location)
.attr('y', 50)
.attr('fill', color);
jump();
location = location + 30;
}
drawSquare('red');
drawSquare('orange');
drawSquare('yellow');
drawSquare('green');
drawSquare('blue');
drawSquare('indigo');
drawSquare('violet');
Conceitos de JavaScript: Expressão Binária (+), Bloco de Código (função), Identificadores, Expressão de Membro
*Conceitos de D3: .append(), .transition(), .delay(), .attr(‘width’,), .attr(‘height’,), .attr(‘x’,), .attr(‘y’,), .attr(‘fill’,)
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]
//Create Group
var grasshopper = svg.append('g');
var myColor = d3.rgb(115, 255, 115);
//Add parts to group
var head = grasshopper.append('path').attr('fill',myColor).attr('d','M761.15,157.3H730.21c0-34.59,8.18-68.32,22.31-99.37,6.51-14.31-4.16-30.55-19.88-30.55a21.86,21.86,0,0,0-19,11.09A239.76,239.76,0,0,0,681.89,157.3h0A216.16,216.16,0,0,0,818.08,358.12l10.4,4.14V224.63A67.33,67.33,0,0,0,761.15,157.3Z');
head.attr('transform', 'translate(-15 0) scale(0.05)');
var body = grasshopper.append('path').attr('fill',myColor).attr('d','M501.2,92.5,339,27.38c0,52.43,24.29,110.07,45.28,129.92H171.11c20.5,112.51,165,205,308.15,205h0L410.6,431c-15.37,15.37-4.49,41.65,17.25,41.65h0a24.4,24.4,0,0,0,17.25-7.15L548,362.62l1.29.53v84.25c0,13.44,10.51,25,23.94,25.21A24.4,24.4,0,0,0,598,448.22v-86h48.8v85.14c0,13.43,10.51,25,23.94,25.21a24.4,24.4,0,0,0,24.86-24.4v-86h0C695.65,239.87,622,142,501.2,92.5Z');
body.attr('transform', 'translate(-15 0) scale(0.05)');
//Initial Location
grasshopper.attr('transform','translate(10 20)');
//Horizontal Index
var x = 0;
function jump(){
grasshopper.transition().delay(x*500/30).attr('transform','translate('+(x+=15)+' 10)').transition().attr('transform','translate('+(x+=15)+' 20)');
}
[/details]