0

Estoy intentando hacer que en mi gráfico d3, dependiendo de la posición del array en la que se encuentra el dato, se pinte un símbolo u otro.

Estoy haciendo varias pruebas y me funciona relativamente bien, cuando selecciono un checkbox me pone el símbolo correcto, y si selecciono el otro, más de lo mismo, es decir, funciona bien cuando solo selecciono un checkbox. El problema viene cuando selecciono los dos, este me pone el simbolo del segundo checkbox.

Código HTML:

    <input type="checkbox" name="planned_checked"  id="eae" > eaepunt1
    <input type="checkbox" name="planned_checked"  id="arab" > arabpunt1
</br>
<select name="type" id="type" onchange="mostrarDatos()" >
    <option value="1">Circle</option>
    <option value="2">Cross</option>
    <option value="3">Diamond</option>
    <option value="4">Square</option>
    <option value="5">Star</option>
    <option value="6">Triangle</option>
    <option value="7">Wye</option>
</select>
<select name="type" id="type2" onchange="mostrarDatos()" >
    <option value="1">Circle</option>
    <option value="2">Cross</option>
    <option value="3">Diamond</option>
    <option value="4">Square</option>
    <option value="5">Star</option>
    <option value="6">Triangle</option>
    <option value="7">Wye</option>
</select>

Esta es la parte del código que define los símbolos y las posiciones de los datos.

function getSymbol(i)
{
    console.log($( "#type" ).val())
    var valor = $( "#type" ).val()

    if($("#eae").prop('checked') == true)               
    {
        valor = $( "#type" ).val()                          
    }                               
    if($("#arab").prop('checked') == true)
    {
        valor=$( "#type2" ).val()
    }
    switch(valor) {
        case "1":
            //return d3.symbol().type(d3.symbolCircle)
            return d3.symbolCircle
            break;
        case "2":
            //return d3.symbol().type(d3.symbolCross)
            return d3.symbolCross
            break;
        case "3":
            //return d3.symbol().type(d3.symbolDiamond)
            return d3.symbolDiamond
            break;
        case "4":
            //return d3.symbol().type(d3.symbolSquare)
            return d3.symbolSquare
            break;
        case "5":
            //return d3.symbol().type(d3.symbolStar)
            return d3.symbolStar
            break;
        case "6":
            //return d3.symbol().type(d3.symbolTriangle)
            return d3.symbolTriangle
            break;
        case "7":
            //return d3.symbol().type(d3.symbolWye)
            return d3.symbolWye
            break;
        default:
            //return d3.symbol().type(d3.symbolCircle)
            return d3.symbolCircle
    }
}
function mostrarDatos()
{
    nowData=[]
    $(".puntos").remove()
    if($("#eae").prop('checked') == true)
    {
        nowData.push(eaepunt1[coundata])
        simbolo1 = getSymbol(0);
        //grupoDatos.selectAll("circle")
    }               
    if($("#arab").prop('checked') == true)
    {
        nowData.push(arabpunt1[coundata])
        simbolo2 = getSymbol(0);
    }
    for(i=0;i<nowData.length;i++){
        grupoDatos.append("path")
            .attr("class", "puntos")
            .style("stroke","black")
            //.attr("d",getSymbol())
            .attr(
                "d",
                d3.symbol().size(75).type(getSymbol(i))                             
            )
        .attr("transform", function(d) { return "translate(" + xScale(nowData[i][0]) + "," + yScale(nowData[i][1]) + ")"; })
    }
    $("#eae").change(function()
    {
        mostrarDatos();
    });

    $("#arab").change(function()
    {
        mostrarDatos()
    });

Me estaba basando en este ejemplo en el que define el símbolo dependiendo del valor que hay dentro de su array. En mi caso es algo distinto, necesito definir el símbolo dependiendo de el checkbox seleccionado.

grupoDatos se define de la siguiente manera: var grupoDatos = grupopadre.append("svg:g");

eaepunt1 y arabpunt1 son arrays con x e y dentro, estas son sus definiciones:

var eaepunt1= [[ 0.0158805449205635, -0.680326018437805], [ 0.0201438176742992, -0.322312871396833],
            [ 0.011640654341047, -0.133062815623676], [ 0.00470902597547251, -0.0785467869785874],
            [ 0.000727198634624893, -0.100827296313506]]

var arabpunt1 = [[ -0.00762487179614224, -0.286532935896321],
            [ -0.00596028103084867, -0.439856557949277], [ 0.00757981604246827, -0.324879938829326],
            [ 0.0109876907050404, -0.143217505450856], [ 0.00633027759899818, -0.0511716852747039],
            [ -0.000185594935602662, -0.0837417695707179]]
3
  • Estoy tratando de hacerte un snippet funcional, pero me dice que eaepunt1 no está definido. Podrías añadir su definición a tu pregunta? (grupoDatos tampoco está definido)
    – ffflabs
    el 22 mar. 2017 a las 12:59
  • Perdon se me habia olvidado, mira la edicion. el 22 mar. 2017 a las 13:12
  • Da igual, el error no estaba ahí. Te respondí usando valores imaginarios
    – ffflabs
    el 22 mar. 2017 a las 13:29

1 respuesta 1

0

Me inventé los valores que faltaban para hacer un snippet y supuse que grupoDatos representa un elemento svg. Casi no he usado D3 en mi vida, pero encontré dos problemas que son ajenos al manejo interno de D3.

Primero, estás declarando los listeners del evento change de tus checkboxes dentro de la función mostrarDatos. Eso hace que hasta que un select no cambie, el checkbox no hace nada, pero de ahí en adelante, cualquier cambio vuelve a llamar a mostrarDatos y por lo tanto vuelve a declarar los listeners, los cuales se van acumulando.

function mostrarDatos()
{
...
    $("#eae").change(function()
    {
        mostrarDatos();
    });

    $("#arab").change(function()
    {
        mostrarDatos()
    });
}

Solución: declarar esos listeners afuera de la función.

function mostrarDatos()
{
...
}

$("#eae").change(function()
{
    mostrarDatos();
});

$("#arab").change(function()
{
    mostrarDatos()
});

Segundo, en tu función getSymbol estás recibiendo como parámetro el orden relativo del checkbox que lo está llamando. Sin embargo, el valor que utilizas para discriminar el símbolo a retornar viene de la condición activo/inactivo de los checkboxes

function getSymbol(i)
{
    var valor = $( "#type" ).val()

    if($("#eae").prop('checked') == true)               
    {
        valor = $( "#type" ).val()                          
    }                               
    if($("#arab").prop('checked') == true)
    {
        valor=$( "#type2" ).val()
    }
    switch(valor) {

    }
}

Bajo esa lógica, si #arab está activo, la función getSymbol siempre pasa por valor=$( "#type2" ).val() ignorando por completo el valor del primer selector.

Solución: utilizar el parámetro i que ya está recibiendo

function getSymbol(i)
{
    if(i===1)               
    {
        valor = $( "#type2" ).val()                          
    } else {                              
        valor = $( "#type" ).val()
    }
    switch(valor) {

    }
}

Tercero: te dejé un snippet con mi solución burda y datos inventados.

function getSymbol(valor)
{
    
    switch(valor) {
        case "1":
            //return d3.symbol().type(d3.symbolCircle)
            return d3.symbolCircle
            break;
        case "2":
            //return d3.symbol().type(d3.symbolCross)
            return d3.symbolCross
            break;
        case "3":
            //return d3.symbol().type(d3.symbolDiamond)
            return d3.symbolDiamond
            break;
        case "4":
            //return d3.symbol().type(d3.symbolSquare)
            return d3.symbolSquare
            break;
        case "5":
            //return d3.symbol().type(d3.symbolStar)
            return d3.symbolStar
            break;
        case "6":
            //return d3.symbol().type(d3.symbolTriangle)
            return d3.symbolTriangle
            break;
        case "7":
            //return d3.symbol().type(d3.symbolWye)
            return d3.symbolWye
            break;
        default:
            //return d3.symbol().type(d3.symbolCircle)
            return d3.symbolCircle
    }
}
function mostrarDatos()
{
    var grupoDatos=d3.select('#grupodatos'),
    nowData=[],
    symbolData=[],
    coundata=0,
    eaepunt1=[[10,10]],
    arabpunt1=[[50,10]];
    $(".puntos").remove()
    if($("#eae").prop('checked') == true)
    {
        nowData.push(eaepunt1[coundata]);
        symbolData.push($( "#type" ).val());
    }               
    if($("#arab").prop('checked') == true)
    {
        nowData.push(arabpunt1[coundata]);
        symbolData.push($( "#type2" ).val());
    }
     for(i=0;i<nowData.length;i++){
         grupoDatos.append("path")
            .attr("class", "puntos")
            .style("stroke","black")
            //.attr("d",getSymbol())
            .attr(
                "d",
                d3.symbol().size(75).type(getSymbol(symbolData[i]))                             
            )
            .attr("transform", function(d) { return "translate("+nowData[i][0]+","+nowData[i][1]+")"; })
    }
    

    

}

     $("#eae").change(function()
    {
         mostrarDatos();
    });

    $("#arab").change(function()
    {
         mostrarDatos()
    });
#grupodatos {
    height: 100px;
    width: 100%;
    border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js"></script>

<input type="checkbox" name="planned_checked"  id="eae" > eaepunt1
<input type="checkbox" name="planned_checked"  id="arab" > arabpunt1
<br>

<select name="type" id="type" onchange="mostrarDatos()" >
    <option value="1">Circle</option>
    <option value="2">Cross</option>
    <option value="3">Diamond</option>
    <option value="4">Square</option>
    <option value="5">Star</option>
    <option value="6">Triangle</option>
    <option value="7">Wye</option>
</select>
<select name="type" id="type2" onchange="mostrarDatos()" >
    <option value="1">Circle</option>
    <option value="2">Cross</option>
    <option value="3">Diamond</option>
    <option value="4">Square</option>
    <option value="5">Star</option>
    <option value="6">Triangle</option>
    <option value="7">Wye</option>
</select>

<svg id="grupodatos"></svg>

Nota al margen, este d3 v4 se ve igual a la v3 a grandes rasgos.

EDIT: había un error en el código, porque estaba asumiendo que las posiciones de los elementos dentro de los array auxiliares eran fijas, cuando en realidad se utiliza [].push y, por tanto, un checkbox puede estar en cualquier posición (según la configuración de encendidos y apagados)

2
  • Hay un problema en el codigo, si seleciono los dos check, y les doy un simbolo distinto a cada uno, funciona bien, pero en el momento que deseleciono el primer check el simbolo del segundo se cambia. Habia conseguido una solucion parecida pero me pasaba lo mismo, que el segundo check cogia el selector del primero el 22 mar. 2017 a las 13:49
  • Tienes razón. Estaba haciendo un supuesto erróneo. Por favor revísalo ahora.
    – ffflabs
    el 22 mar. 2017 a las 16:25

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.