D3 DataMaps: OnClick Events on Bubbles

Question

I am following the datamaps docs and I am trying to set an onClick listener to the bubbles I am rendering on the svg. Now, the svg div has the following sub tags:

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

The docs say this should be done in the following way, for the countries listed on the map:

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

And this works fine, while trying to click on particular regions on the map.

Trying to attach the same listener to bubbles class does nothing..

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

Yoshikoyoshio

Is something else in front of the .bubbles elements so that the click event doesn't get through? – Gildus

Something affected by z-index you reckon? – Yoshikoyoshio

There's no z-index in SVG, the order in which you add elements is the order in which they are displayed. – Gildus

Answer 1

By the time done runs, bubbles haven't been added yet since bubbles is a plugin.

new Datamap returns an object with a d3 selection at svg:

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

That should work for the first batch of bubbles.

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

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

Potboiler