Question

我使用datamaps并为我的气泡设计了鼠标悬停事件：

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类添加到一些元素中，我必须使用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。

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

1 个答案:

修改

修改