D3不会更新数据

Question

Im making a graphic with d3.
I have 2 checkboxes, they reference to 2 different datasets. I need that when I click in one of them that data updates and redraw graphic.
I use this method but doesn't work:

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]);
                 })
            }

nowData is the array to show. eaepunt1 and arabpunt1 are the datasets of checkbox, they have the x and y to show in the graphic.

I start the dataset with this:

    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;
       })
       ;

Answer 1

Try with this:

    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;
           })              
           ;
    }

Edited

    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;
               })              
               ;
        }