6
Uso il plug-in d3-tip per mostrare suggerimenti per paesi. I paesi sono uno strato svg che si trova sulla parte superiore del livello base Leaflet. Desidero che i suggerimenti siano centrati all'interno di ogni stato. Ciò che attualmente funziona è ottimo per tutti i browser ad eccezione di Firefox. Firefox è lontano. Ho provato a regolare per Firefox, ma viene eliminato a seconda delle dimensioni della finestra del browser.offset d3-tip su svgs all'interno di Leaflet, solo Firefox, non funzionante
Qualche idea su come posso risolvere questo problema?
Ecco un Plunker: https://plnkr.co/edit/1FLMkbMSZmF59dxloIlY?p=preview
Schermata di come appare in Firefox quando si libra sopra il Texas: 
Codice:
<!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>
può essere correlato: https://bugzilla.mozilla.org/show_bug.cgi?id=612118 – paradite