score:1

Accepted answer

To access the mouse click event and get the pageX and pageYcoordinates, you can use the global d3.event object. Read more about it here.

For your example, try replacing your done function with the following:

done: function(datamap) {
    datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
        console.log(d3.event.pageY)
        var bubbly = $("#map-bubble");      
        bubbly.css({
            position:"absolute", 
            top: d3.event.pageY, 
            left: d3.event.pageX 
        });
        console.log(bubbly)
            bubbly.fadeIn("slow");
        console.log(geography.properties.name);
    });
}   

Notice how I also removed the first parameter, event.

Here's a codepen showing a working example, and the result.


Related Query

More Query from same tag