我已经使用D3和countries geojson创建了一个基本 map 。这是demo

现在,当用户单击 map 上的任何坐标时,我正在使用天气图标作为标记的工具提示中显示天气信息。

countries = countriesGroup
    .selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("id", function(d, i) {
        return "country" + d.properties.iso_a3;
    })
    .attr("class", "country")
    // add a mouseover action to show name label for feature/country
    .on("mouseover", function(d, i) {
        d3.select("#countryLabel" + d.properties.iso_a3).style("display", "block");
    })
    .on("mouseout", function(d, i) {
        d3.select("#countryLabel" + d.properties.iso_a3).style("display", "none");
    })
    // add an onclick action to zoom into clicked country
    .on("click", function(d, i) {
        var eventLocation = d3.mouse(this);
        var coordinates = projection.invert(eventLocation);
        var proxy = "https://cors-anywhere.herokuapp.com/";
        var wetherInfoUrl =
            "https://api.darksky.net/forecast/c68e9aaf0d467528b9363e383bde6254/" + coordinates[1] + "," + coordinates[0] + "?exclude=minutely,hourly,daily";
        $.ajax({
            url: proxy + wetherInfoUrl,
            success: function(response) {
                tooltipDiv
                    .transition()
                    .duration(200)
                    .style("opacity", 0.9);
                tooltipDiv
                    .html('<h3>Dynamic Weather info: '+ response.currently.humidity +'</h3><br/><img src="https://darksky.net/images/weather-icons/' + response.currently.icon + '.png" alt="clear-night Icon" width="50" height="50">')
                    .style("left", (eventLocation[0] - 250) + "px")
                    .style("top", (eventLocation[1] - 100) + "px");
            }
        });
        d3.selectAll(".country").classed("country-on", false);
        d3.select(this).classed("country-on", true);
        boxZoom(path.bounds(d), path.centroid(d), 20);
    });

现在的问题是,工具提示始终相对于 body 处于绝对位置(它保持在屏幕上的确切位置,如果我们平移和缩放 map 会产生误导),而我希望工具提示相对于单击的坐标 map ,无论我们在 map 上的缩放位置或平移位置,都应固定为单击的坐标,类似于this leaflet示例(总之,我希望工具提示的行为类似于典型的 map 图钉标记)。

最佳答案

我能够使用CSS和以下代码片段来做到这一点:

var tooltipDiv = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

div.tooltip {
    position: absolute;
    text-align: center;
    width: 80px;
    height: 28px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
}

...然后在svg中,
    .on("mouseover", function(d) {
        tooltipDiv.transition()
            .duration(200)
            .style("opacity", .9);
        tooltipDiv.html(d.vessel_name)
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
        })
    .on("mouseout", function(d) {
        div.transition()
            .duration(500)
            .style("opacity", 0);
    })

绝对不是一个完美的解决方案,但希望能有所帮助。完整资料:

演示:

http://Ares513.github.io/04-MapsAndViews/

来源:

https://github.com/Ares513/MapsAndViews

10-06 11:00
查看更多