我如何传递事件变量/在地图上放置一个标记-当绑定完成事件在数据地图&D3

How do I pass event variable/place a marker on the map - when binding done events in Datamaps & D3?

本文关键字：地图 事件 绑定 数据 一个 D3 变量 何传递      更新时间：2023-09-26

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

我不确定我是否使用正确的方法来做这件事，但我选择的方式-似乎没有办法在点击绑定中抓取鼠标XY。我发现的唯一替代方法是这样的:Javascript -跟踪鼠标位置，这看起来很麻烦。

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的。

这是一个显示工作示例的代码依赖，以及结果

相关文章：