Simply Shapes es-419 Explainer

Explicador de Simplemente formas

Objetivo de este acertijo: Dibujar un círculo.

Tutorial de la solución: El código de inicio para dibujar un rectángulo es muy parecido a lo que necesitas para dibujar un círculo. Revisemos cada parte del comando y crea un comando similar para nuestro círculo. var rect crea una variable llamada rect, que no es nada nuevo. Luego, = dice que le daremos a la variable algo para almacenar. Ahora, para la nueva parte: svg.append('rect'); svg son las siglas en inglés de gráficos vectoriales escalables, que son básicamente formas que la computadora interpreta como “conectar los puntos”, conectadas con líneas rectas o, a veces, tipos distintos de curvas. Esto podría ser diferente de la forma en que piensas generalmente acerca de las imágenes computarizadas porque al hacer zoom en un SVG no se ve borroso ni pixelado. .append() es un comando para agregar algo a la pantalla. En la línea de ejemplo, svg.append('rect') agrega un rectángulo a la pantalla, de forma parecida a cómo usarías drawBox('red') para dibujar un cuadro rojo. Pero en vez de un color, le dices una forma. ¡Eso te permite usar 'circle' dentro de .append() para crear un círculo! Bastante chido, no? De todos modos, para crear un círculo, debes crear una nueva variable (quizás simplemente lo llames circle), y luego asignale: svg.append('circle').

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

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

Conceptos de JavaScript: identificadores, expresión de miembro, declaración de la variable
Conceptos de D3: .append()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

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));