Overlaying Kreise auf Prospekt mit d3 Ergebnisse in nicht richtig positioniert

Ich möchte eine leaflet Karte mit circles über d3 überlagern.Overlaying Kreise auf Prospekt mit d3 Ergebnisse in nicht richtig positioniert

<!DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>D3 Test</title> 
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> 
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> 
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
</head> 

<body> 
<div id="map" style="width:600px; height:600px;"> 
    <script> 
     var map = new L.Map("map", { 
       center: [37.8, -96.9], 
       zoom: 4 
      }) 
      .addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")); 

     var svg = d3.select(map.getPanes().overlayPane).append("svg"), 
      svgCircles = svg.append("g").attr("class", "leaflet-zoom-hide"); 

     d3.json("https://jsonblob.com/api/580256bbe4b0bcac9f7ffa43", function(error, myPoints) { 
      if (error) throw error; 


      myPoints.features.forEach(function(d) { 
       d.LatLng = new L.LatLng(d.geometry.coordinates[1], 
        d.geometry.coordinates[0]); 
      }); 

      var circles = svgCircles.selectAll("circle") 
       .data(myPoints.features) 
       .enter() 
       .append("circle") 
       .attr("r", 100) 
       .style("fill", "red") 
       .attr("fill-opacity", 0.5); 

      function update() { 
       circles.attr("cx", function(d) { 
        return map.latLngToLayerPoint(d.LatLng).x; 
       }); 
       circles.attr("cy", function(d) { 
        return map.latLngToLayerPoint(d.LatLng).y; 
       }); 
      } 

      map.on("viewreset", update); 
      update(); 

     }) 
    </script> 
</body> 

</html>

Die circles sind DOM hinzugefügt, aber nicht zeigen, auf Beilage auf. Ich nehme an, weil sie falsch positioniert sind. So sieht es aus:

Wie würde ich sie richtig positionieren? Hinweis: Ich möchte map._initPathRoot(); nicht verwenden, um die svg-element, erstellt von leaflet, abzurufen.

Quelle

2016-10-14 Stophface

Prüfen Sie, "Städte" Daten. Die Daten in d.geometry.coordinates [1], d.geometry.coordinates [0] 'sind ** nicht ** Längen- und Breitengrad. – Mark

@Mark Es tut mir leid, ich habe die falsche Datei verlinkt! Mit dem kann es nicht funktionieren. Ich aktualisierte die Q. – Stophface

Zuerst ist Ihr Radius auf diesen Kreisen viel zu groß. Sie haben Tausende von Punkten in Ihrer JSON-Datei mit jeweils einem Radius von 100 Pixeln und Ihre Karte ist nur 600x600px.

Zweitens scheint es, als ob Sie versuchen, this tutorial zu folgen, aber Sie verlassen ein Schlüsselstück. Herr Bostock spricht darüber, wie Sie die Begrenzungsbox Ihrer Features berechnen, um Ihr SVG in die richtige Position zu bringen. Sie haben diesen Teil weggelassen, sodass Ihr SVG mit einer Standardgröße unter 0,0 platziert wird.

Nach seinem Tutorial mit Ihren Daten produziert den folgenden Code. Hinweis, ich beschränkte Ihre JSON-Daten auf nur wenige Städte im Nordosten. Ich wollte keinen Platz finden, um 6 MB JSON zu hosten (Sie könnten darüber nachdenken, diese Datei auf nur US-Städte zu schneiden).

<!DOCTYPE html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>D3 Test</title> 
 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> 
 
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> 
 
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="map" style="width:600px; height:600px;"></div> 
 
    <script> 
 
    var map = new L.Map("map", { 
 
     center: [37.8, -96.9], 
 
     zoom: 4 
 
     }) 
 
     .addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")); 
 

 
    var svg = d3.select(map.getPanes().overlayPane).append("svg"), 
 
     svgCircles = svg.append("g").attr("class", "leaflet-zoom-hide"); 
 

 
    d3.json("https://jsonblob.com/api/580256bbe4b0bcac9f7ffa43", function(error, myPoints) { 
 
     if (error) throw error; 
 

 
     var transform = d3.geo.transform({ 
 
      point: projectPoint 
 
     }), 
 
     path = d3.geo.path().projection(transform); 
 

 
     var bounds = path.bounds(myPoints), 
 
     topLeft = bounds[0], 
 
     bottomRight = bounds[1]; 
 

 
     myPoints.features.forEach(function(d) { 
 
     d.LatLng = new L.LatLng(d.geometry.coordinates[1], 
 
      d.geometry.coordinates[0]); 
 
     }); 
 

 
     var circles = svgCircles.selectAll("circle") 
 
     .data(myPoints.features) 
 
     .enter() 
 
     .append("circle") 
 
     .attr("r", 10) 
 
     .style("fill", "red") 
 
     .attr("fill-opacity", 0.5); 
 

 
     // Use Leaflet to implement a D3 geometric transformation. 
 
     function projectPoint(x, y) { 
 
     var point = map.latLngToLayerPoint(new L.LatLng(y, x)); 
 
     this.stream.point(point.x, point.y); 
 
     } 
 

 
     function update() { 
 
     circles.attr("cx", function(d) { 
 
      return map.latLngToLayerPoint(d.LatLng).x; 
 
     }); 
 
     circles.attr("cy", function(d) { 
 
      return map.latLngToLayerPoint(d.LatLng).y; 
 
     }); 
 
     svg.attr("width", bottomRight[0] - topLeft[0]) 
 
      .attr("height", bottomRight[1] - topLeft[1]) 
 
      .style("left", topLeft[0] + "px") 
 
      .style("top", topLeft[1] + "px"); 
 

 
     svgCircles.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")"); 
 
     } 
 

 
     map.on("viewreset", update); 
 
     update(); 
 

 
    }) 
 
    </script> 
 
</body> 
 

 
</html>

Reaktion auf die Kommentare

Weil ich die Daten in eine kleinere Teilmenge von Städten (jene in NY und PA) begrenzt die Grenzen werden nur dann berechnet, was in der Daten ist . Here it is with all the cities in your JSON (warten Sie etwas, bis es geladen wird).

Und ein schneller Screenshot mit allen Daten:

Quelle

2016-10-15 16:20:18 Mark

Nein, das ist nicht der Trick. Du hast das gleiche Problem wie ich. Es wird nur in eine Kachel gerendert (die unter Toronto/Ottowa). – Stophface

@Stophface, ja, weil ich meine Städte auf die in NY und PA beschränkt habe. Die Grenzen werden zu dem berechnet, was in den Daten enthalten ist. Versuchen Sie es mit allen US-Städten – Mark

@Stophface, hier ist es mit [alle Daten] (http://plnkr.co/edit/Lqme891ee8rwDiXktY5L?p=preview). Sie müssen eine Weile warten, bis es geladen wird ... – Mark

Overlaying Kreise auf Prospekt mit d3 Ergebnisse in nicht richtig positioniert

Antwort

Verwandte Themen