Javascript 如何传递事件变量/在映射上放置标记-在Datamaps中绑定已完成事件时&；D3？

我正在用d3上的数据地图制作美国地图。我想在基于鼠标XY的选定状态上放置一个标记。#map bubble是我要在地图上放置的标记

我不确定我是否使用了正确的方法来实现这一点，但我选择的方式-似乎没有办法在点击绑定中抓取鼠标XY。我发现唯一的选择是这样的：这似乎很麻烦

var map = new Datamap({
        element: document.getElementById("map"),
        scope: 'usa',
        fills: {
            defaultFill: "#ABDDA4",
            win: '#0fa0fa'
        },
        geographyConfig: {
    dataUrl: null, //if not null, datamaps will fetch the map JSON (currently only supports topojson)
    hideAntarctica: true,
    borderWidth: 1,
    borderColor: '#FDFDFD',
    popupTemplate: function(geography, data) { //this function should just return a string
        return '';
    },
    popupOnHover: false, //disable the popup while hovering
    highlightOnHover: true,
    highlightFillColor: '#FC8D59',
    highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
    highlightBorderWidth: 2
},
data: {
    'TX': { fillKey: 'win' },
    'FL': { fillKey: 'win' },
    'NC': { fillKey: 'win' },
    'CA': { fillKey: 'win' },
    'NY': { fillKey: 'win' },
    'CO': { fillKey: 'win' }
},
done: function(datamap) {
    datamap.svg.selectAll('.datamaps-subunit').on('click', function(event, geography) {
        console.log(event.pageY)
        var bubbly = $("#map-bubble");      
        bubbly.css({
            position:"absolute", 
            top: event.pageY, 
            left: event.pageX 
        });
        console.log(bubbly)
            bubbly.fadeIn("slow");
        console.log(geography.properties.name);
    });
}
});

---

要访问鼠标单击事件并获取

pageX

和

pageY

坐标，可以使用全局

d3.event

对象。阅读更多关于它的信息

对于您的示例，请尝试将

done

函数替换为以下内容：

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

请注意，我还删除了第一个参数event

下面是一个工作示例，以及