Question

我正在使用d3上的数据地图创建的美国地图上工作。我想根据鼠标XY在所选状态上放置一个标记。 #map-bubble是我想要放置在地图上的标记。

我不确定我是否使用正确的方法来做到这一点，但我选择的方式 - 似乎并没有抓住鼠标XY的方法在点击绑定中。我发现的唯一选择就是这样：Javascript - Track mouse position这看起来很麻烦。

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

Answer 1

要访问鼠标单击事件并获取pageX和pageY坐标，您可以使用全局d3.event对象。阅读更多相关信息here。

对于您的示例，请尝试使用以下内容替换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。

这是显示工作示例的codepen和result。

如何在地图上传递事件变量/放置标记 - 在Datamaps＆amp;中绑定完成事件时D3？

1 个答案: