1

我正在制作一张使用 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);
    });
}
});
4

1 回答 1

1

要访问鼠标单击事件并获取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。

这是一个显示工作示例的代码笔，结果.

于 2014-07-31T00:25:22.120 回答