删除元素并添加

Question

我有一个根据输入动态更新的直方图（点击地图上的国家/地区）。每个栏都有鼠标悬停信息显示。

虽然所有条形图至少在视觉上都能正确更新，但鼠标悬停菜单不会出现在已删除和添加的条形图上。

这是项目的链接。例如，当我在加载印度后加载瑞典的直方图时，鼠标悬停显示将无法正常工作。

http://jbk1109.github.io/tennisMapWithPlayersListOnHover.html

//This is the function called when a country on the map is clicked

function drawBarChart(d){
    selectCountryName = event['path'][0]['__data__']['name']
    selectCountry = d.id    

    countryArray = d3.values(tennis).filter(function(d){
        return d.COUNTRY_ID == selectCountry
    })

/*
    1. Select existing bars
    2. Need the data array of existing bars.
    3. remove the data.
    4. remove the bar (the svg element)

    */

    var addRect = d3.select('g.nations').selectAll('rect')
              .data(countryArray)

              console.log(addRect.exit().remove())
              console.log(addRect.enter())
          addRect.enter()
          .append('rect')

          addRect.transition().duration(650)
          .attr({
                      x: function(d,i){ 
                            return(xScale(d.DATE))
                            // return (rectWidth(d.DATE)) 
                          },
                      y: function(d){ 
                         return (rectHeight + 50) - heightScale(d.COUNT) 
                      },
                      width: function(d){ 
                            return (width-150)/yearArray.length
                            // return rectWidth.rangeBand()
                          },
        height: function(d){ 
            return heightScale(d.COUNT)
          },
        fill: 'steelblue'
    }).attr('class','countryRect')



  var y = d3.select('g.nations').selectAll('text.count')
        .data(countryArray)

        y.exit().remove()

    y.enter()
    .append('text')
    y.transition().duration(650)
    .attr('class','count')
    .attr('x',function(d,i){
        return(xScale(d.DATE) + ((width-150)/yearArray.length)/2)
    })
    .attr('y', function(d){
      return (rectHeight + 50) - heightScale(d.COUNT) + 11
    })
    .text(function(d){
        return d.COUNT
    })
    .attr('text-anchor','middle')
}

//这是在加载时最初创建直方图的位置。

  var padding_right = 8
  var nations =    svg.append('g').attr("class","nations").attr('transform','translate('+ 30 +',10)')

var histSelection = nations.selectAll('rect.countryRect')
          .data(function(){
                    return d3.values(tennis).filter(function(d){
                          return d.COUNTRY_ID == 840;
                          })
            }).enter()

          histSelection.append('rect')
          .attr({
                  class: function(d){return "countryRect"},
                      x: function(d,i){ 
                            return(xScale(d.DATE))
                            // return (rectWidth(d.DATE)) 
                          },
                      y: function(d){ 
                          return (rectHeight + 50) - heightScale(d.COUNT)
                        },
                      width: function(d){ 
                            return (width-150)/yearArray.length
                            // return rectWidth.rangeBand()
                          },
        height: function(d){ 
           return heightScale(d.COUNT)},
        fill: 'steelblue'
    })



          // Add player count to at the top of each bar

    var countLabel = d3.select('g.nations').selectAll('text.count')
    .data(function(){
        return d3.values(tennis).filter(function(d){
          return d.COUNTRY_ID == 840;
        })
    })

    countLabel.enter()
    .append('text')
    .attr('class','count')
    .attr('x',function(d,i){
        return(xScale(d.DATE) + ((width-150)/yearArray.length)/2)
    })
    .attr('y', function(d){
      return (rectHeight + 50) -heightScale(d.COUNT) +11
    })
    .text(function(d){
        return d.COUNT
    })
    .attr('text-anchor','middle')
 var x_axis = nations.append('g').attr("class","xAxis").attr("transform", "translate(0," + (rectHeight+50) + ")").call(xAxis)

**添加鼠标悬停事件

  var selectRect = d3.select('g.nations').selectAll('.countryRect')
  selectRect.on('mouseover',function(d){

    console.log(d)
    d3.select('.divContainer').style('left',this.x.baseVal.value).style('left',this.x.baseVal.value + 'px').style('display','block')
    divContainer.style('top',this.y.baseVal.value).style('top',(this.y.baseVal.value+90) +'px')

    var playerList = d.players;
    playerList.sort(function(a,b){ return a.RANKING - b.RANKING})

    var table = divContainer.append('table')
    var headerRow = table.append('tr')
    headerRow.append('th').html("Ranking").attr("class",'ranking')
    headerRow.append('th').html("Name").attr("class",'name')

    var players = table.append('tbody').selectAll('tr').data(playerList).enter()
    var eachRow = players.append('tr')
    var eachCell1 = eachRow.append('td').attr('class','rankingCell').html(function(d){return d.RANKING})
    var eachCell2 =  eachRow.append('td').attr('class','nameCell').html(function(d){return d.PLAYER_NAME})

    // var addPlayers = players.append('text').text(function(d){
      // return d.PLAYER_NAME

  })
  .on('mouseout',function(d){
      d3.select('.divContainer').style('display','none')
      d3.select('.divContainer').select('table').remove()
  })