Я использую круги d3 на листовой карте.Я хочу добавить всплывающие подсказки на круги, всплывающие подсказки создаются, как вы можете видеть на изображении, но они, кажется, находятся под картой, я хочу, чтобы они были сверху.
Мне нужны эти всплывающие подсказки для отображения информациио наборе данных, использованном для создания кругов, поэтому я не могу использовать всплывающие подсказки Leaflet.
Подсказка есть, но находится под картой:
var mymap = L.map('map', {
zoomControl: false
}).setView([36.71367, 3.18031], 15.5);
var width = document.getElementById('map').offsetWidth;
var height = document.getElementById('map').offsetHeight;
L.svg().addTo(mymap);
var svg = d3.select("#map").select("svg"), /* add the svg to leaflet map */
g = svg.append("g");
function go() {
var popup = L.popup();
var dispo;
//vider le dataset
dataset = []; /* this is related to the data i'm displaying with circles */
//Enlever les anciens cercles
g.selectAll("circle")
.data(dataset)
.exit()
.remove();
d3.json('data/data.json', function(data) {
//some code to fill the dataset
pane: "tilePane"
}).addTo(mymap); //end L.geoJSON
dataBind();
update();
}); //end json
function dataBind() {
circles = g.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
}
mymap.on("zoomend", update);
//Placer les cercles sur chaque salle
function update() {
//tooltip code
var infobulle = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "white")
.style("opacity", "0")
.style("padding", "0 10px");
circles.attr("cx",
function(d) {
return mymap.latLngToLayerPoint([d[4].lat, d[4].lng]).x;
}
).attr("cy",
function(d) {
return mymap.latLngToLayerPoint([d[4].lat, d[4].lng]).y;
}
)
.attr("pointer-events","visible")
.style("opacity", 0.8)
.attr("r", 0)
.style("fill", function(d, i) {
return colors(d[3].Type);
})
.on("mouseover", function(d){
infobulle.transition()
.style("opacity", .9)
infobulle.html(" heures ")
.style("left", (d3.event.pageX - 35 + "px"))
.style("top", (d3.event.pageY - 30 + "px"))
})
.on("mouseout", function(d){
infobulle.transition()
.style("opacity", 0)
})
}