D3 DataMaps: OnClick Events on Bubbles Passing in Attributes of Bubble

Question

I'm using D3 and DataMaps with bubbles. I want to add custom actions when someone clicks on a bubble. These actions require passing in attributes of the bubble like the bubble's name.

How do I pass the bubble's name into an on click event for that bubble?

map.svg.selectAll('.bubbles').on('click', function(bubble) {
    console.log(bubble.name);
});

This code snippet does not work. I get the following error message:

Uncaught TypeError: Cannot read property 'name' of undefined

I'm following a similar example from the documentation for passing in attributes of the geography:

datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
    alert(geography.properties.name);
});

I have also read this very similar question that does not answer my question about passing in attributes of the bubble.

Answer 1

Instead of this

map.svg.selectAll('.bubbles').on('click', function(bubble) {
    console.log(bubble.name);
});

try:

d3.selectAll(".datamaps-bubble").on('click', function(bubble) {
    console.log(bubble);
});

hope this works!