Soy estudiante de programación a través de un curso online, nos han mandado un ejercicio y tengo problemas con él.
He conseguido hacerlo todo, menos que el alert me muestre las coordenadas, ya que no soy capaz de enlazarlas. El alert sí que me funciona, ya que cuando doy click en los puntos, me salta el Por fin! He probado muchas cosas que se me han ocurrido y he ido buscando, pero nada me funciona. No sé que estoy haciendo mal...
Esto es el enunciado del ejercicio:
Partiendo del documento HTML entregado y de la documentación de d3.js…
Modificar la gráfica para tener un rango de 0 a 100, en vez de 0 a 10, tanto en el eje x como en el y. • Este dato debe estar almacenado en una constante.
Borrar todos los puntos anteriores y pintar cuatro puntos nuevos. • (20, 30) • (35, 10) • (70, 38) • (100, 100)
Modificar los círculos para que tengan una radio de 5 puntos. • Este dato debe ser almacenado en una constante.
Al hacer clic sobre cada punto debe aparecer una alerta indicando su posición. • Es necesario agregar el atributo “cursor” de tipo “pointer” a cada uno de ellos para entender que son clickables.
Este es el código que tengo hasta ahora:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id="graph"></div>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
// Definición de constantes
const GRAPH_HEIGHT = 300;
const GRAPH_WIDTH = 400;
const MARGIN = 30;
const DATA = [
{
x: 20,
y: 30
},
{
x: 35,
y: 10
},
{
x: 70,
y: 38
},
{
x: 100,
y: 100
}
]
const minMax = [0, 100];
const radioCirculo = 5;
// Funciones escalares -> Más info: https://d3-spanish.readthedocs.io/es/latest/basico/escalas.html
const xScale = d3.scaleLinear()
// Valores mínimos y máximos que se mostrarán en la gráfica
.domain(minMax)
// Proyección del valor del dominio en relación al ancho de la gráfica
.range([0, GRAPH_WIDTH]);
const yScale = d3.scaleLinear()
.domain(minMax)
.range([GRAPH_HEIGHT, 0]);
// Añadimos la gráfica al elemento del dom
let svg = d3.select("#graph")
.append("svg")
.attr("width", GRAPH_WIDTH + MARGIN * 2)
.attr("height", GRAPH_HEIGHT + MARGIN * 2)
.append("g")
.attr("transform", `translate(${MARGIN}, ${MARGIN})`);
// Añadimos las líneas de los ejes
svg
.append('g')
.attr("transform", `translate(0, ${GRAPH_HEIGHT})`)
.call(d3.axisBottom(xScale));
svg
.append('g')
.call(d3.axisLeft(yScale));
// Añadimos un punto por cada objeto del array de datos
svg
.selectAll("whatever")
.data(DATA)
.enter()
.append("circle")
.style("cursor", "pointer")
.on("click", function() {alert("Por fin!")})
// Se obtienen las coordenadas x e y en relación a los valores del objeto
.attr("cx", ({ x }) => xScale(x))
.attr("cy", ({ y }) => yScale(y))
.attr("r", radioCirculo)
</script>
</body>
</html>
Y este es el código que nos han dado con el ejercicio, por si os aclara algo:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id="graph"></div>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
// Definición de constantes
const GRAPH_HEIGHT = 300;
const GRAPH_WIDTH = 400;
const MARGIN = 30;
const DATA = [
{
x: 1,
y: 3
},
{
x: 4,
y: 9
},
{
x: 8,
y: 5
},
]
// Funciones escalares -> Más info: https://d3-spanish.readthedocs.io/es/latest/basico/escalas.html
const xScale = d3.scaleLinear()
// Valores mínimos y máximos que se mostrarán en la gráfica
.domain([0, 10])
// Proyección del valor del dominio en relación al ancho de la gráfica
.range([0, GRAPH_WIDTH]);
const yScale = d3.scaleLinear()
.domain([0, 10])
.range([GRAPH_HEIGHT, 0]);
// Añadimos la gráfica al elemento del dom
let svg = d3.select("#graph")
.append("svg")
.attr("width", GRAPH_WIDTH + MARGIN * 2)
.attr("height", GRAPH_HEIGHT + MARGIN * 2)
.append("g")
.attr("transform", `translate(${MARGIN}, ${MARGIN})`);
// Añadimos las líneas de los ejes
svg
.append('g')
.attr("transform", `translate(0, ${GRAPH_HEIGHT})`)
.call(d3.axisBottom(xScale));
svg
.append('g')
.call(d3.axisLeft(yScale));
// Añadimos un punto por cada objeto del array de datos
svg
.selectAll("whatever")
.data(DATA)
.enter()
.append("circle")
// Se obtienen las coordenadas x e y en relación a los valores del objeto
.attr("cx", ({ x }) => xScale(x))
.attr("cy", ({ y }) => yScale(y))
.attr("r", 3)
</script>
</body>
</html>