JavaScript - Gráfica con d3

Gráfica con d3

Publicado por Susana (3 intervenciones) el 25/08/2022 16:03:15

Hola, estoy haciendo este ejercicio para un curso que estoy dando. He conseguido hacerlo todo, menos que el alert me muestre las coordenadas, ya que no soy capaz de enlazarlas. El alert si 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...
Alguien me puedo ayudar?

enunciado

Os adjunto 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>

    <div id="puntos"></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>

Además no entiendo muy bien estas últimas líneas:

// 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)

Este es el código base que nos ha dado el profesor:

<!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>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 45

Val: 40

Gráfica con d3

Publicado por Marlon (90 intervenciones) el 25/08/2022 22:32:35

No se si sea la forma correcta... Pero todo objeto en JS se puede acceder con "this".

Entonces lo que yo aria seria en el alert poner lo siguiente:

alert(x = ${this.__data__.x} y = ${this.__data__.y}`)

Entonces te explico, cada que se agrega un punto este guarda sus datos o coordenadas y para acceder a esos datos se puede usar el metodo "this", este metodo tiene un dato llamado "__data__" que guarda las coordenadas en X y Y.

Espero te funcione. Saludos!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Gráfica con d3

Publicado por Ivan (118 intervenciones) el 27/08/2022 09:44:37

Hola,

por lo que veo os hacen trabajar con la biblioteca d3js, tienes la documentación en https://d3-spanish.readthedocs.io/es/latest/basico/introduccion.html

Lamentablemente no la conozco y es muy extensa como para estudiarla ahora mismo.

Pero sí te puedo buscar las referencias a sus funciones https://github.com/d3/d3/blob/main/API.md

Y concretamente a la función attr https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_attr

.attr("cx", ({ x }) => xScale(x))

.attr("cy", ({ y }) => yScale(y))

.attr("r", radioCirculo)

Estas instrucciones creo que añaden una nueva propiedad (cx, cy, r) al objeto svg con los valores de (x, y, r) pasados por la función (xScale(x), yScale(y) y el valor radioCirculo).

Estas propiedades parece que son estándar para que el objeto svg pueda dibujar los puntos tal y como se indica en https://d3-spanish.readthedocs.io/es/latest/avanzado/svg/filters.html#basico

Y por último, como indica Marlon puedes acceder a las propiedades (x, y) con

alert('X: ' + this.__data__.x + ', Y: ' + this.__data__.y)

Un saludo!

Valora esta respuesta

Comentar

Gráfica con d3

Publicado por Susana (3 intervenciones) el 30/08/2022 14:24:09

Muchas gracias, ahora ya sí que me funciona. No me había dado cuenta que era un objeto, soy así de lista jajaja. Y tampoco me había leído lo de la función attr, no supe buscarlo bien. Muchísimas gracias a los dos.

Valora esta respuesta

Comentar