0

Estoy haciendo un grafico con d3, tengo dos checkbox, cada cual hace referencia a una serie de datos, lo que quiero es cuando pulse en uno y este activado muestre los datos. Ya hice este metodo para jqplot, pero a la hora de actualizar los datos en jqplot era tan facil como usar redraw. Ahora en d3.js no entiendo muy bien como hacerlo. Os dejo el método:

function mostrarDatos(){
                nowData=[]
                if($("#eae").prop('checked') == true)
                {
                    nowData.push(eaepunt1[coundata])
                }

                if($("#arab").prop('checked') == true)
                {
                    nowData.push(arabpunt1[coundata])
                }
                console.log(nowData)
                svg.selectAll("circle")
                .data(nowData)
                .attr("cx", function(d) {
                    return xScale(d[0]);
                 })
                .attr("cy", function(d) {
                    return yScale(d[1]);
                 })
            }

Por último añadiros algo de informacion, nowData es el Array de datos que quiero mostrar. eaepunt1 es el Array de datos que contiene x e y del gráfico, este hace referencia al primer checkbox, arabpunt1 es el Array de datos del segundo checkbox, también contiene x e y para el gráfico.

Los datos al principio los pinto de esta manera:

    var datos = svg.selectAll("circle")
       .data(nowData)
       .enter()
       .append("circle")
       .attr("cx", function(d) {
            return xScale(d[0]);
       })
       .attr("cy", function(d) {
            return yScale(d[1]);
       })
       .attr("r", function(d) {
            return 5;
       })
       ;

Creo que he dejado toda la informacion primordial aquí, si tenéis alguna duda en algo comentádmelo y editaré la pregunta.

EDITADO

He conseguido mostrar los datos cambiando el metodo mostrarDatos() de esta manera:

    function mostrarDatos(){
        nowData=[]
        if($("#eae").prop('checked') == true)               
        {   
            nowData.push(eaepunt1[coundata])                                    
        }               

        if($("#arab").prop('checked') == true)
        {
            nowData.push(arabpunt1[coundata])                                                               
        }                                           
        console.log(nowData)                            
        svg.selectAll("circle")
           .data(nowData)
           .enter()            
           .append("circle")                           
           .attr("cx", function(d) {
                return xScale(d[0]);
           })
           .attr("cy", function(d) {
                return yScale(d[1]);
           })
           .attr("r", function(d) {
                return 5;
           })              
           ;
    }

Pero cuando desmarco el check se siguen mostrando los datos

2 respuestas 2

0

Al final he conseguido hacerlo. Habia que añadir un exit y un remove al principio del metodo. No entiendo muy bien porque pero funciona:

function mostrarDatos(){
                nowData=[]
                svg.selectAll("circle")
                    .data(nowData)
                    .exit()
                    .remove()
                if($("#eae").prop('checked') == true)               
                {   
                    nowData.push(eaepunt1[coundata])                                    
                    svg.selectAll("circle")

                }               

                if($("#arab").prop('checked') == true)
                {
                    nowData.push(arabpunt1[coundata])                                                               

                }                                           
                console.log(nowData)

                svg.selectAll("circle")
                   .data(nowData)
                   .enter()            
                   .append("circle")                           
                   .attr("cx", function(d) {
                        return xScale(d[0]);
                   })
                   .attr("cy", function(d) {
                        return yScale(d[1]);
                   })
                   .attr("r", function(d) {
                        return 5;
                   })              
                   ;
            }
0

Hola gracias por tus comentarios, oye si has trabajado con JqPlot, Sabras por que cuando la gráfica la convierto a imagen se distorciona un poco, se ve más grande y no sale completa, ojala me pudieras ayudar, muchas gracias

Saludos

1
  • Esto no constituye una solución al problema, por lo que no debes ponerlo como respuesta, es más bien un comentario. Sigue participando por acá y pronto llegarás a obtener suficientes puntos de reputación para poder publicar comentarios. Saludos! Commented el 27 sept. 2017 a las 19:51

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.