1

我正在使用数据地图，并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并且我必须使用mouseout.

4

1 回答 1

2

鼠标点击不会有问题。因此，您可以按照自己的方式进行操作。

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

现在对于悬停，问题是 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");
}

编辑

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

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

工作代码在这里。

于 2015-12-15T11:22:45.830 回答