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