d3.json() undefined googleoverlay

Question

Ich bin super neu zu codieren und zu versuchen, den folgenden Code zu implementieren: https://bl.ocks.org/mbostock/899711. Statt einer lokalen .json-Datei lese ich einen JSON von einer URL, leider sind LAT und LONG Strings, also parse ich sie mit data.forEach(), aber wenn ich die geparsten d.LAT- und d.LONG-Daten außerhalb anrufe. forEach() werden die d.LAT und d.LONG gelesen, kehren aber als undefiniert zurück.

var map = new google.maps.Map(d3.select(".box-panel-map").node(), { 
    zoom: 15, 
    draggableCursor: 'crosshair', 
    center: new google.maps.LatLng(54.52936037,-117.46484254), 
    mapTypeId: google.maps.MapTypeId.TERRAIN, 
    backgroundColor: "white", 
    mapMaker: 'True', 
    styles: [ 
    { 
    featureType: "all", 
    elementType: "labels", 
    stylers: [{ visibility: "off" }] 
    } 
    ] 
}); 


var url =""; 

d3.json(url, function(data) { 
     data.forEach(function(d) { 
      d.LAT = +d.LAT___DEG; 
      d.LONG = +d.LONG___DEG; 
     }); 

    var overlay = new google.maps.OverlayView(); 

    // Add the container when the overlay is added to the map. 
    overlay.onAdd = function() { 
    var layer = d3.select(this.getPanes().overlayMouseTarget).append("div") 
     .attr("class", "pipemap"); 

    // Draw each marker as a separate SVG element. 
    overlay.draw = function() { 

     var projection = this.getProjection(), 
     padding = 10; 

     function transform (d) { 
      console.log(d.LAT); //THIS IS RETURNING AS UNDEFINED 
      var googleCoordinates = new google.maps.LatLng(d.LAT, d.LONG); 
      var pos = projection.fromLatLngToDivPixel(googleCoordinates); 
      return d3.select(this) 
       .style("left", (pos.x - padding) + "px") 
       .style("top", (pos.y - padding) + "px"); 
       //.attr('fill', color(d.value[2]))  
      } 


     /*var color = d3.scale.linear() 
     .domain([0, 1]) 
     .range(["blue", "red"]); */ 
     var cValue = function(d) { return d.GFLAG;}, 
      color = d3.scale.linear() 
      .domain([0, 1]) 
      .range(["blue", "red"]); 

     var tooltip = d3.select("body") 
     .append("div") 
     .attr("class", "tooltip") 
     .style("opacity", 0); 

     var marker = layer.selectAll("svg") 
     .data(d3.entries(data)) 
     .each(transform) // update existing markers 
     .enter().append("svg:svg") 
      .each(transform) 
      .attr("class", "marker"); 

     // Add a circle. 
     marker.append("circle") 
     .attr("r", 2.5) 
     .attr("cx", padding) 
     .attr("cy", padding) 
     .style("fill", function(d) { return color(cValue(d));}) 
     .on("mouseover", function(d) { 
      tooltip.transition() 
      .duration(200) 
      .style("opacity", .9); 
     // tooltip.html('Population: '+d.key+'<br>'+'Allele Frequencey: '+d.value[2].toPrecision(3)) 
      tooltip.html('Feature-Type: '+d.key+'') 
      .style("left", (d3.event.pageX + 5) + "px") 
      .style("top", (d3.event.pageY - 28) + "px"); 
     }) 
     .on("mouseout", function(d) { 
      tooltip.transition() 
      .duration(200) 
      .style("opacity", 0); 
      }); 


     }; 
     }; 
    overlay.setMap(map); 
}); 

JSON-Objekt Beispiel in der URL lese ich gerade:

[{"FEATURE_NUMBER":"ABC-1115", 
"LAT___DEG":"54.412530", 
"LONG___DEG":"-117.447681", 
"FLAG":0,"COMMENTS":null}]  

Answer 1

Zwar gibt es an anderer Stelle ein Fehler sein kann, glaube ich, werden Sie feststellen, dass diese Zeilen Sie verursachen Trauer:

var marker = layer.selectAll("svg") 
    .data(d3.entries(data)) 

In Mike's bl.ock verwendet er d3.entries(), wie auch Sie. D3-Einträge nehmen ein Objekt mit n Eigenschaften und erstellen ein Array mit n Objekten, die jeweils eine Eigenschaft darstellen. Ihre Daten sind bereits eine Reihe von Objekten. Werfen Sie einen Blick auf das, was d3.entries() kehrt mit Ihren Daten und seinen:

Mikes bl.ock:

var data = {"KMAE":[-120.12,36.98,"MADERA MUNICIPAL AIRPORT",[26,1,2,5,6,3,2,1,2,7,29,12,3]],"KSJC":[-121.92,37.37,"SAN JOSE INTERNATIONAL AIRPORT",[28,1,1,1,6,10,5,3,2,4,14,21,7]]} 
 

 
console.log(d3.entries(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

Ihr JSON-Format:

var data = [ 
 
{"FEATURE_NUMBER":"ABC","LAT___DEG":"54.412530","LONG___DEG":"-117.447681","FLAG":0,"COMMENTS":null},{"FEATURE_NUMBER":"DEF","LAT___DEG":"11","LONG___DEG":"-12","FLAG":1,"COMMENTS":null} 
 
]; 
 

 
console.log(d3.entries(data))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

Ihre Daten sind nicht so eingerichtet, dass die Verwendung von d3.entries() sinnvoll ist. Sie können jedoch diesen Ansatz verwenden, und wenn Sie console.log(d); in Ihrer Transformationsfunktion verwenden, sollten Sie in der Lage sein zu sehen, dass Ihre lat langen Werte jetzt bei d.value.lat/long sind.

---

Aus Gründen der Demonstration, hier ist ein minimales Beispiel d3.entries():

{ a:1,b:2,c:3 } ->[ {key:a,value:1},{key:b,value:2},{key:c,value:3} ]:

var data = { 
 
    a:1,b:2,c:3 
 
} 
 

 
console.log(d3.entries(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

Answer 2

ich es geschafft, Es funktioniert kurz nach der Veröffentlichung dieser Frage. Ich habe es vorher nicht bemerkt, aber es stellt sich heraus, dass das Objekt tatsächlich "transformiert" wird. Ich fand das heraus, indem ich eine console.log (d) in der Umwandlungsfunktion anstelle von console.log (d.LAT) oder console.log (data.lat) ausführte.

Anstelle des ursprünglichen JSON-Format es so etwas verwandelt: d.value.LAT

function transform (d) { 
     console.log(d); //TEST HERE 
     var googleCoordinates = new google.maps.LatLng(d.value.LAT, d.value.LONG); 
     var pos = projection.fromLatLngToDivPixel(googleCoordinates); 
     return d3.select(this) 
      .style("left", (pos.x - padding) + "px") 
      .style("top", (pos.y - padding) + "px"); 
      //.attr('fill', color(d.value[2]))  
     } 

:

{[key,value: {["LAT": "123", "LONG":567]} 
]} 
{[key,value: {["LAT": "123", "LONG":567]} 
]} 

Also das Objekt, das ich durch zugegriffen werden benötigt konnte