CODEWITHSUNDEEP
javascriptjqueryd3.jsjquery-eventsdatamaps
rvandoni
rvandoni

Reputation: 3407

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

I'm using datamaps and I costumized the mouseover event for my bubbles:

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

but I want do my stuff AND show the template popup set with the popupTemplate property when I defined the bubbles structure:

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

How can I achieve this? How can I show the popup inside my event listener? I need to control mouseover and mouseout events because I want to add a CSS class to some elements into the mouseover and I have to remove it with the mouseout.

Upvotes: 1

Views: 3432

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Mouse click will not have an issue. So you can do it the way you doing.

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

Now for hover, the problem is that that dataMaps has registered its mouseover event listener 

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

So when you do the above it replaces the dataMap's listener with yours...thus the popup is not visible.

I can think of doing it like this instead:

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

Edit

You can add the mouse event to the container on which the datamap is drawn

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

Edit

You can get the bubble data and which bubble is entered and exited like below:

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

Working code here.

Upvotes: 2

Related Questions