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