Otra forma de mejorar el diagrama de dispersión es agregar un eje x y un eje y. D3 tiene dos métodos axisLeft() y axisBottom() para representar los ejes y y x, respectivamente. (Ejes es la forma plural de eje). Aquí hay un ejemplo para crear el eje x basado en xScale en los desafíos anteriores: const xAxis = d3.axisBottom(xScale); El siguiente paso es representar el eje en el lienzo de SVG. Para hacerlo, puedes usar un componente general SVG, el elemento g . La g significa grupo. A diferencia de rect , circle y text , un eje es solo una línea recta cuando se procesa. Porque es una forma simple, usando g funciona. El último paso es aplicar un atributo de transform para colocar el eje en el lienzo SVG en el lugar correcto. De lo contrario, la línea se representaría a lo largo del borde del lienzo SVG y no sería visible. SVG admite diferentes tipos de transforms , pero es necesario translate posicionamiento de un eje. Cuando se aplica al elemento g , mueve todo el grupo hacia arriba y hacia abajo según las cantidades dadas. Aquí hay un ejemplo:

const xAxis = d3.axisBottom (xScale);

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

El código anterior coloca el eje x en la parte inferior del lienzo de SVG. Luego se pasa como un argumento al método call() . El eje y funciona de la misma manera, excepto que el argumento de translate está en la forma (x, 0). Debido a que translate es una cadena en el método attr() anterior, puede usar la concatenación para incluir valores variables para sus argumentos.

El diagrama de dispersión ahora tiene un eje x. Cree un eje y en una variable llamada yAxis usando el método axisLeft() . Luego renderiza el eje usando un elemento g . Asegúrese de usar un atributo de transform para traducir el eje por la cantidad de unidades de relleno a la derecha y 0 unidades hacia abajo. Recuerda call() al eje.

```yml tests: - text: Su código debe usar el método axisLeft() con yScale pasado como argumento. testString: 'assert(code.match(/\.axisLeft$yScale$/g), "Your code should use the axisLeft() method with yScale passed as the argument.");' - text: 'El elemento g eje y debe tener un atributo de transform para traducir el eje en (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: Su código debe llamar al yAxis . testString: 'assert(code.match(/\.call$yAxis$/g), "Your code should call the yAxis.");' ```