diff --git a/curriculum/challenges/spanish/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.spanish.md b/curriculum/challenges/spanish/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.spanish.md index 40c785c790..74d5b1b6dc 100644 --- a/curriculum/challenges/spanish/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.spanish.md +++ b/curriculum/challenges/spanish/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.spanish.md @@ -9,7 +9,7 @@ localeTitle: Añadir ejes a una visualización --- ## Description -
Otra forma de mejorar el diagrama de dispersión es agregar un eje xy 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.
+
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.