d3工具提示未顯示在傳單地圖頂部

Question

我在傳單地圖上使用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) }) } 

Answer 1

我認為樣式屬性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");