javascript - Datamaps:如何在鼠标悬停时显示弹出窗口并自定义鼠标悬停事件监听器

Question

我正在使用 datamaps我为我的气泡设置了 mouseover 事件:

map.svg.selectAll('.datamaps-bubble').on('click', function(info) {
  // do something
}).on('mouseover', function(info) {
      // do something else
  }).on('mouseout', function(info) {
      // do something else
  });

但我想做我的事情并在定义气泡结构时显示使用 popupTemplate 属性设置的模板弹出窗口:

map_ips.bubbles(
  bubbles,
  {
    popupTemplate: function (geography, data) {
      return '<div class="hoverinfo"><strong>' + data.name + '</strong>' +
        ' <br />' +
        'Country: <strong>' +
        data.country_name +
        '</strong>' +
        '</div>';
     }
   });

我怎样才能做到这一点？如何在我的事件监听器中显示弹出窗口？我需要控制 mouseover 和 mouseout 事件，因为我想将 CSS 类添加到 mouseover 中的某些元素，我必须将其删除鼠标移开。

Answer 1

鼠标点击不会有问题。所以您可以按自己的方式进行。

d3.selectAll('.datamaps-bubble').on('click', function(info) {
  console.log("hello")
  // do something
});

现在对于 hover，问题是 dataMaps 已经注册了它的 mouseover 事件监听器

.on('mouseover', function(info) {
  // do something else
});

因此，当您执行上述操作时，它会将 dataMap 的监听器替换为您的...因此弹出窗口不可见。

我可以考虑这样做:

  popupTemplate: function(geo, data) {
      doSomethingOnHover();//call your mouse over function in the template
    return '<div class="hoverinfo">'+data.name+'<\div>';
  }

function doSomethingOnHover(){
    console.log("Hovering");
}

编辑

可以在绘制datamap的容器中添加鼠标事件

d3.selectAll('.datamaps-bubble').on('click', function(info) {
  console.log("hello")
  // do something
});
//container is the div on which the data map is made.
d3.selectAll('#container').on('mouseout', function(info) {
  console.log("out")
  // do something
});
d3.selectAll('#container').on('mouseover', function(info) {
  console.log("enteredasdasd")
  // do something
});

编辑

您可以获取气泡数据以及哪个气泡进入和退出，如下所示:

d3.selectAll('#container').on('mouseout', function(info) {
  if (d3.event.target.tagName == "circle"){
   //since you want the bubble only
    console.log(d3.select(d3.event.target).data()[0],"out")
  }
});
d3.selectAll('#container').on('mouseover', function(info) {
  if (d3.event.target.tagName == "circle"){
    //since you want the bubble only
    console.log(d3.select(d3.event.target).data()[0],"over")
  }
});

工作代码 here .