6

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…

  1. 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.

  2. Borrar todos los puntos anteriores y pintar cuatro puntos nuevos. • (20, 30) • (35, 10) • (70, 38) • (100, 100)

  3. Modificar los círculos para que tengan una radio de 5 puntos. • Este dato debe ser almacenado en una constante.

  4. 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>

1 respuesta 1

2

Vas muy bien, solo te falta agregar el argumento que trae la información del punto al que le das click. El handler del evento click se llama con 3 argumentos a los cuales tienes acceso dentro de la función:

.on('click', function(data, index, elements) {
  // data.x, data.y
})

El primer argumento data es el dato asociado al elemento que das click, index es la posición en la que se encuentra el dato dentro del array de datos y elements contiene el array de elementos (array de circle en este caso).

Teniendo eso en cuenta solo tienes que usar el primer argumento:

svg
  .selectAll('whatever')
  .data(DATA)
  .enter()
  .append('circle')
  .style('cursor', 'pointer')
  .on('click', function (point) {
    return alert(point.x + ', ' + point.y);
  })
2
  • Ahora si! Muchas gracias! No me había dado cuenta que era un objeto. Ahora ye me salen las coordenadas al clicar.
    – Susana
    Commented el 30 ago. 2022 a las 12:32
  • Buenas tardes @Susana . Si te sirvió la respuesta darle al ✓ para que el sitio sepa que ya se respondió a tu pregunta.
    – DABL03
    Commented el 31 ago. 2022 a las 17:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.