Broken Hearted pt-br Explainer

Explicação de Coração partido

Objetivo deste desafio: Montar as formas em um coração vermelho.

Passo a passo da solução: Para começar, o quadrado precisa girar 45 graus em torno do canto superior esquerdo. O canto superior esquerdo é dado por seus atributos 'x' e 'y' que são 101 e 33. Para girar, você muda o atributo 'transform' e o define com um valor de 'rotate(45 101 33)' - lembre-se de que os três números na string 'rotate' são graus no sentido horário, coordenadas x e y do ponto de giro. Em seguida, o movedCircle precisa ir direto ao ponto (68, 68). Isso significa que você quer definir suas coordenadas 'cx' e 'cy' para 68. Lembre-se, os círculos usam 'cx' e 'cy' para “centro x coordenada” e “centro y coordenada” e os retângulos usam 'x' e 'y' para as coordenadas do canto superior esquerdo. Então, para o littleCircle você precisa mudar o raio para 48 usando seu atributo 'r'. Por último, todas as três formas precisam ser coloridas em 'red', modificando o atributo 'fill'.

Solução do código de exemplo:

(Toque abaixo para revelar)


square.attr('x', 101)

.attr('y', 33)

.attr('transform', 'rotate(45 101 33)')

.attr('fill', 'red');

movedCircle.attr('cx', 68)

.attr('cy', 68)

.attr('fill', 'red');

littleCircle.attr('r', 48)

.attr('fill', 'red');

Conceitos de JavaScript: Identificadores, expressão de membro

Conceitos de D3: .attr(‘x’,), .attr(‘y’,), .attr(‘transform’,), .attr(‘fill’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘r’,)

Código Adicional (código oculto executado antes do código do desafio):


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

var square = svg.append('rect').attr('width',95).attr('height',96);

var movedCircle = svg.append('circle').attr('r',48);

var littleCircle = svg.append('circle').attr('cx',133).attr('cy',68);

let scale = window.innerHeight/(190);

svg.attr('transform',`scale(${scale})`);