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 class 添加到 mouseover 的某些元素中，我必须使用mouseout.

Answer 1

鼠标点击不会有问题。所以你可以按照你的方式去做。

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

现在悬停，问题是dataMaps已经注册了它的鼠标悬停事件侦听器

.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");
}

编辑

您可以将鼠标事件添加到绘制数据图的容器中

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.

Datamaps：如何在鼠标悬停时显示弹出窗口并自定义鼠标悬停事件侦听器

Datamaps: how to show popup on mouseover AND customize the mouseover event listener

javascript

jquery

d3.js

datamaps

jquery-events

编辑

编辑