在D3地图上显示工具提示

Question

我使用D3和这个国家地理json数据创建了一个基本地图。这里是演示链接。

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

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

现在的问题是，工具提示保持相对于页面的绝对位置（即使我们在地图上平移和缩放，它仍停留在屏幕上的确切位置，这会产生误导），而我希望工具提示相对于地图上单击的坐标位置，并且无论我们在地图上缩放或平移，都应该固定在单击的坐标位置，类似于这个leaflet示例（简而言之，我希望工具提示的行为类似于典型的地图标记针）。

- Saurabh Palatkar

---

你确定要使用d3.js吗？看起来OpenLayers是你需要的：https://openlayers.org/en/latest/examples/ - Helder Sepulveda

Answer 1

我可以使用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

- Athena

Answer 2

你应该将元素添加到地图的SVG中，而不是body。像这样：

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

- Saeed