关于javascript：D3：在鼠标悬停/鼠标移出时进入()，退出()


D3: enter(), exit() on mouseover/mouseout

我有一个函数，在将鼠标悬停在折线图上的某个点上时，会调用Twitter API并获取与其时间戳关联的推文。然后，它添加与数据相对应的嵌套div和元素。我的问题是，在mouseout上，我想从DOM中删除该div及其关联的数据，以便当我将鼠标悬停在另一点时，将使用相关数据创建一个新面板。

我的鼠标悬停看起来像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.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);
});

我打算将其删除的mouseout函数具有以下exit()函数：

1
2
3
4
5
6
7
8
    .on("mouseout", function(d,i){
        // exit()
        var panelRemove = d3.select(".panel-body");

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

我不确定这是怎么回事，因为我已经传递了要在此处删除的相同数据。我也尝试过d3.select(".panel").selectAll("div.panel-body")，但没有任何反应。

初始面板看起来非常好，包含所有相关数据。但是mouseout不会将其删除，并且我无法显示新面板。

由于将相同的tweet_list数据传递给panelRemove选择，因此exit()代码将找不到要删除的任何节点。 exit().remove()将删除不再在数据中表示的现有节点。如果您要传递一个空的tweet列表作为新数据，则exit().remove()应该删除节点。