---
id: 587d7fad367417b2b2512bdf
title: Add Axes to a Visualization
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Añadir ejes a una visualización
---
## Description
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.
## Instructions
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.
## Tests
```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
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```