Simply Shapes pt-br Explainer

Explicação de Simplesmente formas

Objetivo deste desafio: Desenhar um círculo.

Passo a passo da solução: O código com o qual você começa a desenhar um retângulo é muito semelhante ao que você precisa para desenhar um círculo. Vamos dar uma olhada em cada parte do comando e construir um comando semelhante para nosso círculo. var rect está criando uma variável chamada rect - isso não é novidade. A seguir, = diz que vamos dar à variável algo para armazenar dentro dela. Agora para a nova parte: svg.append('rect'); O svg significa Gráficos Vetoriais Escaláveis, que são basicamente formas que o computador vê como “conectar os pontos” – conectados com linhas retas ou às vezes com diferentes tipos de curvas. Isso pode ser diferente da maneira com que você geralmente pensa em imagens computadorizadas, porque o zoom em um SVG não fica embaçado ou pixelado. .append() é um comando para adicionar algo à tela. Na linha de exemplo, svg.append('rect') adiciona um retângulo à tela, semelhante a como você usaria drawBox('red') para desenhar uma caixa vermelha. Mas em vez de uma cor, você indica uma forma. Isso permite usar 'circle' dentro de .append() para criar um círculo! Então, para fazer um círculo, você cria uma nova variável (talvez você pudesse simplesmente chamá-la de circle) e depois a atribui a ela: svg.append('circle')
Solução do código de exemplo:
(Toque abaixo para revelar)

var rect = svg.append('rect');
var circle = svg.append('circle');

Conceitos de JavaScript: Identificadores, Expressão de Membro, Declaração de Variável
Conceitos de D3: .append()
Código Adicional (código oculto executado antes do código do desafio):

class D4 {
  constructor(d3) {
    this.d3 = d3;
  }
  attr(key, value) {
    this.d3.attr(key, value);
    return this;
  }
  append(name) {
    const result = this.d3.append(name);
    result._groups[0].forEach(el => {
      // list shapes and attributes to change here:
      if (el.tagName === 'rect') {
         el.setAttribute('x', 25);
         el.setAttribute('y', 25);
         el.setAttribute('width', 100);
         el.setAttribute('height', 100);
         el.setAttribute('fill','pink');
      }
      if (el.tagName === 'circle') {
         el.setAttribute('r', 50);
         el.setAttribute('cx', 75);
         el.setAttribute('cy', 75);
         el.setAttribute('fill', 'blue');
      }
    });
    return this;
  }
}

var svg = new D4(d3.select('body').append('svg').attr('width',500).attr('height',500));