我正在使用 d3-tip 插件来显示国家/地区的工具提示。这些国家是位于 Leaflet 基础层之上的 svg 层。 我希望工具提示在每个州内居中。 我目前拥有的功能适用于除 Firefox 之外的所有浏览器。 Firefox 离我们还很远。我已尝试针对 Firefox 进行调整，但它会根据浏览器窗口的大小而被丢弃。
关于如何解决这个问题有什么想法吗？
这是一个 Plunker:https://plnkr.co/edit/1FLMkbMSZmF59dxloIlY?p=preview
将鼠标悬停在 Texas 上时在 Firefox 中显示的屏幕截图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet-src.js"></script>
<script src="d3.tip.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
body{
margin: 0px;
font-family:Arial, sans-serif;
}
/* geojson components */
#map {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index:0;
}
path.states { fill: #ff3300; fill-opacity: .65; stroke: #fff; stroke-width: 3px;}
path.states:hover {
fill-opacity: 1;
}
/* Leaflet */
.leaflet-container {
background: #ccc !important;
}
.leaflet-right {
right: 10px !important;
}
.leaflet-top {
top: 10px !important;
}
/* D3 tips for states*/
.d3-tip-state {
line-height:130%;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
font-size:13px;
padding: 12px;
background: rgba(205, 72, 122, 0.9);
color: #fff;
border-radius: 5px;
position:relative;
z-index:101;
}
/* Firefox styles */
@-moz-document url-prefix() {
.d3-tip-state {
margin-left:-100px;
}
}
</style>
</head>
<body>
<div id="map"></div>
<script>
//tiles
var map = new L.Map("map", {zoomControl: true, center: [29, -92], zoom: 6})
.addLayer(new L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri',
maxZoom: 13
}));
/* Initialize the SVG layer */
map._initPathRoot();
var svg = d3.select("#map").select("svg"),
g = svg.append("g");
/* Define the d3 projection */
var path = d3.geo.path().projection(function project(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
});
var firefox = /Firefox/i.test(navigator.userAgent);
var statetip = d3.tip()
.attr('class', 'd3-tip-state')
.offset(function(){
if (firefox) {
return [(this.getBBox().height / 6) - 200, -800]
}else{
return [this.getBBox().height / 2, 0]
}
})
.html(function(d,i) {
return d.properties.name;
});
g.call(statetip);
// Add states
d3.json("states.json", function(states) {
var states = g.selectAll("path")
.data(states.features)
.enter()
.append("path")
.attr("class", function(d){ return "states " + d.properties.postal;})
.attr("d", path)
.on('mouseover', statetip.show)
.on('mouseout', statetip.hide);
map.on("viewreset", function reset() {
states.attr("d",path)
})
});
</script>
</body>
</html>
最佳答案
分析代码并针对预期输出进行修改。检查这个 plunker:
Click here to view plunker page
We have achieved through Leaflet marker with Popup without d3.tip
**OnMouseOver**: I get necessary info like latitude & longitude,
tooltip text from data point and placed Leaflet marker with empty
icon, then bind popup and opened it
**OnMouseOut**: I have removed Leaflet marker layer from Map.
请检查链接、代码并让我知道您的反馈。
关于javascript - Leaflet 中 svgs 的 d3-tip 偏移量，仅限 Firefox，不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36556756/