D3 DataMaps: OnClick Events on Bubbles

Question

I am tracking datamaps documents and I am trying to set the onClick listener to the bubbles that I pass to svg. Now svg div has the following smudges:

<svg> <g id class="datamaps-subunits">..</g> <g id class="bubbles">..</g> </svg> 

The docs say this should be done as follows, for the countries listed on the map:

 done: function(datamap) { datamap.svg.selectAll('.datamaps-subunits').on('click', function() { alert("hello"); }); } 

And this works great when trying to click on certain regions on a map.

Trying to connect the same listener to the bubble class does nothing.

 done: function(datamap) { datamap.svg.selectAll('.bubbles').on('click', function() { alert("hello"); }); } 

Answer 1

done bubbles has not been added yet, since bubbles is a plugin.

new Datamap returns an object with choice d3 in svg :

 var map = new Datamap({...}); //add bubbles map.bubbles(bubbleData); //handle bubble clicks map.svg.selectAll('.bubbles').on('click', function() {...}); 

This should work for the first batch of bubbles.

If you dynamically add bubbles and don't want to listen to reset listeners, you can use jQuery event delegation to handle dynamic bubbles:

 $(map.svg[0][0]).on('click', '.bubbles', function(e) { //handle click here as well });