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

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

• javascript
• svg
• d3.js
• datamaps

• 1 Is something else in front of the .bubbles elements so that the click event doesn't get through? – Lars Kotthoff Commented Nov 30, 2014 at 16:34
• Something affected by z-index you reckon? – Claudiu S Commented Nov 30, 2014 at 16:40
• There's no z-index in SVG, the order in which you add elements is the order in which they are displayed. – Lars Kotthoff Commented Nov 30, 2014 at 17:19

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