Question

我正在使用d3-tip插件显示各国的工具提示。这些国家/地区是位于Leaflet基础层顶部的svg图层。我希望工具提示在每个状态中居中。我目前拥有的功能非常适合所有浏览器，除了Firefox。 Firefox就是这样。我试图调整Firefox，但它会因浏览器窗口的大小而被抛弃。

关于我如何解决这个问题的任何想法？

这是一个Plunker：https://plnkr.co/edit/1FLMkbMSZmF59dxloIlY?p=preview

将鼠标悬停在德克萨斯州时，Firefox的外观截图：

代码：

<!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 &copy; Esri &mdash; 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>

Answer 1

分析代码并针对预期输出进行修改。检查这个plunker：

Click here to view plunker page

**Output.html**

<html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<body>
  <h1>Counting rabbits</h1>
  <script>
   var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://localhost/webservice/allprocess.php?uid=6",
  "method": "GET",
  "headers": {
    "cache-control": "no-cache",
    "postman-token": "26737044-5963-f666-033c-66c4685031ad"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

  </script>
  <h1>...Finished counting</h1>
</body>
</html>

请检查链接，代码并告诉我您的反馈。

仅适用于Leaflet，仅适用于Firefox的svgs上的d3-tip偏移

1 个答案: