CODEWITHSUNDEEP
javascriptd3.js
DoReMi
DoReMi

Reputation: 221

Why exit() not work here?

I use some data to draw circles by time, update process is good, but exit not work,here is part of my code:

function update(data) {

        var tmp1 = group.selectAll('.circle').data(data)
        tmp1.enter().append('circle')
                .attr('cx', function(d) {coords = projection([d.long,d.lat]); return  coords[0]})
                .attr('cy', function(d) {coords = projection([d.long,d.lat]); return  coords[1]})
                .attr('r',  function(d) { return countScale(d.count)})
                .attr("stroke", function(d, i) { return color(d.name, i);}) 
                .attr("stroke-width", 2.3)
                .style('fill', function(d) { 
                        if (d.count == 0){ return 'white';}
                        if (d.count !== 0){ return color(d.name);}
                    });
                tmp1.exit().remove();
}

After that I use setInterval to update my data,but exit not work, the previous circle still exit.

setInterval(function() { update(nextDay(data)) }, 10);

Upvotes: 0

Views: 158

Answers (1)

mbostock
mbostock

Reputation: 51819

Your selectAll(".circle") is selecting by the class name "circle", but you are then appending circle elements and not setting the class attribute to match your selector. So your exit selection will always be empty, because there are no matching elements.

Did you mean to selectAll("circle") (no leading .) to select by element name instead?

(Also, you might want a key function and to read about the general update pattern.)

Upvotes: 1

Related Questions