Explicação de DrawSquare
Objetivo deste desafio: Fazer a função drawSquare colorir a caixa.
Passo a passo da solução: A função drawCircle atua exatamente como a função drawSquare, exceto que ela desenha um círculo em vez de um retângulo. Se você adicionar uma linha para executar a função drawSquare, por exemplo drawSquare('red'); você verá uma caixa preta. Dê uma olhada dentro da definição da função drawSquare - o código entre as chaves. Note que o retângulo tem todos os atributos necessários, exceto o 'fill'. Isso significa que ele usará a cor padrão preta. Então você precisa adicionar um .attr(), mas qual a cor você precisa definir? Deve ser qualquer cor escrita entre parênteses quando você executar a função. drawSquare('red') deve significar .attr('red) e drawSquare('orange') deve significar .attr('orange'). Se você olhar para a declaração de função drawSquare você verá um parâmetro chamado color. Que color é uma variável à qual será atribuído um valor, como 'red' ou 'white', quando você executar a função. Onde quer que essa variável esteja escrita dentro das chaves, ela terá o valor que lhe foi atribuído pela chamada de função.
Solução do código de exemplo:
(Toque abaixo para revelar)
function drawCircle(color) {
circle.attr('r', 15)
.attr('cx', 15)
.attr('cy', 15)
.attr('fill', color);
}
function drawSquare(color) {
square.attr('width', 30)
.attr('height', 30)
.attr('x', 30)
.attr('y', 0)
.attr('fill', color);
}
drawCircle('blue');
drawSquare('green');
Conceitos de JavaScript: Bloco de Código (função), Expressão de Membro, Identificadores
Conceitos de D3: .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,), .attr(‘width’,), .attr(‘height’,), .attr(‘x’,), .attr(‘y’,)
Código Adicional (código oculto executado antes do código do desafio):
var circle = svg.append('circle');
var square = svg.append('rect');
