D3：鼠标悬停/鼠标移出时的enter（），exit（）

Question

I have a function which, on mouseover of a point on a line graph, calls the Twitter API and fetches a tweet associated with its timestamp. It then adds nested divs and elements which correspond to data. My problem is that on mouseout, I'm wanting to remove that div and its associated data from the DOM so that when I mouseover another point, a new panel is created with the relevant data.

My mouseover looks like this:

.on("mouseover", function(d,i){
    var tweetDivs = d3.select(".panel").selectAll("div.panel-body")
                      .data(tweet_list)
                      .enter()
                      .append("div")
                      .attr("id", function(d){return "p"+d['id_str']})
                      .classed("panel-body", true);

                tweetDivs.append("img")
                    .attr("width", 20)
                    .attr("height", 20)
                    .attr("src", function(d){return d['user']['profile_image_url']})
                    .classed("panel-tweet-img-profile", true);

                tweetDivs.append("p")
                    .text(function(d){
                        var tweet_created_format = d3.timeFormat("%-I:%M%p, %e %b %Y")(d3.timeParse("%a %b %d %H:%M:%S %Z %Y")(d['created_at']));
                        return "@"+d['user']['screen_name']+"    ("+tweet_created_format+")";
                    })
                    .classed("panel-tweet-text-header", true);

                tweetDivs.append("p")
                    .text(function(d){return d['text'];})
                    .classed("panel-tweet-text-body", true);

                var infoBlock = tweetDivs.append("p")
                                .classed("panel-tweet-info-block", true);

                infoBlock.append("img")
                    .attr("src", imgRetweet)
                    .classed("panel-tweet-img-retweet", true);
                infoBlock.append("text")
                    .text(function(d){
                        return d['retweet_count'];
                    })
                    .classed("panel-tweet-text-retweet", true);

                infoBlock.append("img")
                        .attr("src", imgFav)
                        .classed("panel-tweet-img-favorite", true);
                infoBlock.append("text")
                    .text(function(d){
                        return d['favorite_count'];
                    })
                .classed("panel-tweet-text-favorite", true);
});

And my mouseout function which is meant to remove it, has the following exit() function:

    .on("mouseout", function(d,i){
        // exit()
        var panelRemove = d3.select(".panel-body");

        panelRemove.data(tweet_list)
                    .exit()
                    .remove();
    });

I'm not sure what it is I'm doing wrong as I've passed the same data to be removed here. I've also tried d3.select(".panel").selectAll("div.panel-body") but nothing happens.

The initial panel appears absolutely fine, with all of the relevant data. But mouseout doesn't remove it and I can't show new panels.

Answer 1

Since you are passing the same tweet_list data to the panelRemove selection, the exit() code won't find any node to remove. The exit().remove() will remove existing nodes that are no longer represented in the data. If you were to pass in an empty tweet list as new data, the exit().remove() should remove the nodes.