如何使下拉列表(用D3制成)停留更长的时间

Question

我有一个下拉列表，当鼠标徘徊在D3的直方图上时。一旦小鼠光标离开直方图，它就会消失。我想让列表停留更长的时间，以便访问者可以突出显示列表中的项目，或者我可以向访问者可以单击的每个项目添加链接。

什么是实现这一目标的最佳方法？（延迟失踪？添加填充/保证金？），而且，只要鼠标光标在上面，列表就会停留吗？

实时演示：http：//jbk1109.github.io/tennismapwithplayerslistonhover.html

谢谢！

addRect.on('mouseover',function(d){
var tables = divContainer.selectAll('table').data(dataArray).enter().append('table')
var tablesHeader = tables.append('tr')
tablesHeader.append('th').attr('class','headerCell').attr('colspan', 2).append('td').html("Ranking / Name")
// tablesHeader.append('th').attr('class','rankingCell').append('td').html("Ranking")
// tablesHeader.append('th').attr('class','nameCell').append('td').html('Name')
// tables.selectAll(".tableRows").data(function(d){console.log(d3.select(this.parentNode).datum())}).enter()
var tableRows = tables.selectAll(".tableRows").data(function(d){ return d3.select(this.parentNode).datum()}).enter()
.append('tr').attr('class','tableRows')
tableRows.append('td').attr('class','rankingCell').html(function(d) {return d.RANKING})
tableRows.append('td').attr('class','nameCell').html(function(d) {return d.PLAYER_NAME})
  })
  .on('mouseout',function(d){
      d3.select('.divContainer').style('display','none')
      d3.select('.divContainer').select('.upperArrow').remove()
      // d3.select('body').select('.divContainer').remove()
      d3.selectAll('table').selectAll('tr').data([]).exit().remove()
        d3.select('.divContainer').selectAll('table').data([]).exit().remove()
  })

Answer 1

在您的mouseout处理程序中，而不是立即删除弹出窗口，而是将其包装在setTimeout调用中（如果您希望它褪色或其他内容，甚至可以使用D3过渡）。然后为弹出窗口设置mouseover处理程序，然后取消setTimeout，直到用户在弹出窗口上进行mouseout。