Map Of Places pt-br Explainer

Explicação de Mapa de lugares

Objetivo deste desafio: Adicione os lugares ao mapa usando a função drawOnMap.

Passo a passo da solução: Quando o código inicial é executado, você vê que há uma grade em branco. É preciso adicionar cada lugar de arrayOfPlaces no mapa usando a função drawOnMap. Já existe um laço for...of configurado para usar. É executado em todos os lugares, mas é preciso ter certeza de que ele faz algo com eles - desenhe-os no mapa usando drawOnMap(...). Que argumentos são necessários para a função - o que fica entre parênteses? Se você analisar a definição da função, verá que drawOnMap pede um valor de x, y e color. Assim, se você receber um objeto place da array, como acessa os valores x, y e color? Usando expressões de membro - o nome da propriedade com um ponto antes dele. Isso significa que place.name lhe daria o nome do lugar e place.color lhe daria a cor e assim por diante. Agora, se você executar o código novamente, haverá parte de um círculo preto no canto superior esquerdo do mapa. Isso porque a função drawOnMap não foi concluída - não usa seus parâmetros: x, y e color. É necessário ter certeza de que o .attr() de cx está configurado como x, cy está configurado como y, e fill está configurado como color. Então, tudo deve funcionar!

Solução do código de exemplo:
(Toque abaixo para revelar)

var arrayOfPlaces = [
  {
    name: 'mall',
    x: 240,
    y: 160,
    color: red
  },
  {
    name: 'home',
    x: 50,
    y: 70,
    color: blue
  },
  {
    name: 'gym',
    x: 100,
    y: 140,
    color: yellow
  },
  {
    name: 'work',
    x: 180,
    y: 30,
    color: white
  }
];
function drawOnMap(x, y, color) {
    var newPoint = svg.append('circle')
                     .attr('r', 8);
    newPoint.attr('cx', x)
      .attr('cy', y)
      .attr('fill', color);
}
for (var place of arrayOfPlaces) {
    drawOnMap(place.x, place.y, place.color);
}

Conceitos de JavaScript: Bloco de código (função, laço for), Encadeamento, Biblioteca D3, Modificadores D3

Conceitos de D3: .append(), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,)

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

for (var i=0; i<400; i = i + 20) {
    var line = svg.append('rect').attr('width', 1).attr('height', 400).attr('x', i).attr('fill', 'slategrey');
}
for (var i=0; i<400; i = i + 20) {
    var line = svg.append('rect').attr('width', 400).attr('height', 1).attr('y', i).attr('fill', 'slategrey');
}