d3工具提示未显示在传单地图

Question

我在传单地图上使用d3圆圈。我想在圆圈上添加工具提示，工具提示就像您在图像上看到的那样创建，但它们似乎位于地图下方，我想将它们放在最顶层。

我需要这些tootlips来显示有关用于创建圆圈的数据集的信息，因此我无法使用Leaflet工具提示。

工具提示在那里，但它位于地图下方：

＆＃13;

＆＃13;

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)


        })





   


  }

＆＃13;

＆＃13;

＆＃13;

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");