Outra maneira de melhorar o gráfico de dispersão é adicionar um eixo xe um eixo y. D3 tem dois métodos axisLeft() e axisBottom() para renderizar os eixos y e x, respectivamente. (Axes é a forma plural do eixo). Aqui está um exemplo para criar o eixo x baseado no xScale nos desafios anteriores: const xAxis = d3.axisBottom(xScale); O próximo passo é renderizar o eixo na tela do SVG. Para fazer isso, você pode usar um componente SVG geral, o elemento g . O g representa o grupo. Ao contrário de rect , circle e text , um eixo é apenas uma linha reta quando é renderizado. Porque é uma forma simples, usando g obras. A última etapa é aplicar um atributo transform para posicionar o eixo na tela do SVG no lugar certo. Caso contrário, a linha seria renderizada ao longo da borda da tela do SVG e não seria visível. O SVG suporta diferentes tipos de transforms , mas o posicionamento de um eixo precisa ser translate . Quando é aplicado ao elemento g , ele move todo o grupo para cima e para baixo pelos valores dados. Aqui está um exemplo:

const xAxis = d3.axisBottom (xScale);

svg.append ("g")
.attr ("transformar", "traduzir (0," + (h - preenchimento) + ")")
.call (xAxis);

O código acima coloca o eixo x na parte inferior da tela do SVG. Então é passado como um argumento para o método call() . O eixo y funciona da mesma maneira, exceto que o argumento de translate está no formato (x, 0). Como translate é uma string no método attr() acima, você pode usar a concatenação para incluir valores de variáveis para seus argumentos.

O gráfico de dispersão agora possui um eixo x. Crie um eixo y em uma variável chamada yAxis usando o método axisLeft() . Em seguida, renderize o eixo usando um elemento g . Certifique-se de usar um atributo transform para converter o eixo pela quantidade de unidades de preenchimento à direita e 0 unidades abaixo. Lembre-se de call() o eixo.

```yml tests: - text: Seu código deve usar o método axisLeft() com yScale passado como argumento. testString: 'assert(code.match(/\.axisLeft$yScale$/g), "Your code should use the axisLeft() method with yScale passed as the argument.");' - text: 'O elemento y-axis g deve ter um atributo transform para converter o eixo por (60, 0).' testString: 'assert($("g").eq(1).attr("transform").match(/translate$60\s*?,\s*?0$/g), "The y-axis g element should have a transform attribute to translate the axis by (60, 0).");' - text: Seu código deve chamar o yAxis . testString: 'assert(code.match(/\.call$yAxis$/g), "Your code should call the yAxis.");' ```