我在传单地图上使用d3圆圈。我想在圆上添加工具提示,您可以在图像上看到创建的工具提示,但它们似乎在地图下方,我想将它们放在顶部。
我需要那些tootlips来显示有关用于创建圆的数据集的信息,所以我不能使用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)
})
}
我认为样式属性z-index在这种情况下会很有用。您可以将.style("z-index", "999")
var infobulle添加为:
//tooltip code
var infobulle = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "white")
.style("opacity", "0")
.style("padding", "0 10px")
.style("z-index", "999");
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句