No último desafio, você criou e anexou um retângulo ao elemento `svg` para cada ponto do `dataset` para representar uma barra. Infelizmente, todos eles ficaram empilhados um sobre o outro.
O posicionamento de um retângulo é realizado pelos atributos `x` e `y`. Eles dizem ao D3 onde começar a desenhar a forma na área `svg`. O último desafio os definiu como 0. Então, todas as barras foram colocadas no canto superior esquerdo.
Para um gráfico de barras, todas as barras devem ficar no mesmo nível vertical, o que significa que o valor de `y` permanece o mesmo (0) para todas as barras. O valor de `x`, no entanto, precisa ser alterado conforme você adiciona novas barras. Lembre-se de que valores de `x` maiores empurram os itens mais para a direita. À medida que você passa pelos elementos do array no `dataset`, o valor de `x` deve aumentar.
O método `attr()` do D3 aceita uma função de callback para definir dinamicamente esse atributo. A função de callback recebe dois argumentos, um para os dados em si (geralmente `d`) e um para o índice do ponto dos dados no array. O segundo argumento para o índice é opcional. Este é o formato:
É importante notar que você NÃO precisa escrever um laço `for` ou usar `forEach()` para iterar pelos itens no conjunto de dados. Lembre-se de que o método `data()` analisa o conjunto de dados. Qualquer método que seja encadeado após `data()` é executado uma vez por cada item no conjunto de dados.
**Observação:** cada barra tem uma largura de 25, então aumentar cada valor de `x` por 30 adiciona algum espaço entre as barras. Qualquer valor superior a 25 poderia servir neste exemplo.
