在 D3 地图上显示工具提示

Question

我使用 D3 和 countries geojson 创建了一个基本地图。这是demo。

现在，当用户单击地图上的任何坐标时，我会在工具提示中显示天气信息，其中天气图标作为标记。

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

现在的问题是，工具提示保持在相对于主体的绝对位置（它保持在屏幕上的确切位置，如果我们平移和缩放地图会产生误导），而我希望工具提示相对于在地图上单击的坐标，无论我们在地图中的哪个位置进行缩放或平移，都应将其固定为单击的坐标，类似于 this leaflet 示例（简而言之，我希望工具提示的行为类似于典型的地图图钉标记）。

Answer 1

我能够使用 CSS 和以下 sn-ps 做到这一点：

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

...然后在 svgs 中，

    .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

Answer 2

您应该将元素添加到地图的 SVG，而不是主体。像这样：

svg.select("#map")
   .append("text")
   .data(json)
   .classed("geopath", true);