d3.json（）undefined googleoverlay

Question

我是超級新手編碼，並試圖執行以下代碼：https://bl.ocks.org/mbostock/899711。我不是一個本地的.json文件，而是從一個url讀取一個json，不幸的是，LAT和LONG是字符串，因此我使用data.forEach（）解析它們，但是當我調用解析後的d.LAT和d.LONG外部數據時。 forEach（），正在讀取d.LAT和d.LONG，但返回值未定義。

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對象例如URL裏面我讀：

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

Answer 1

雖然可能有其他地方的錯誤，我相信你會發現，這些生產線造成你解憂：

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

在Mike的block中，他使用d3.entries（），就像你一樣。 D3條目接受一個具有n個屬性的對象，並用n個對象創建一個數組，每個對象代表一個屬性。你的數據是已經是的一個對象數組。看看什麼d3.entries()回報與您的數據和他的：

麥克的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>

您JSON格式：

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>

您的數據不是以使用d3.entries（）適當的方式設置的。但是，您可以使用此方法，並且如果在轉換函數中使用console.log(d);，則應該能夠看到您的經緯度值現在爲d.value.lat/long。

---

出於演示的緣故，這裏的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

我設法得到它在發佈這個問題後不久就會工作。我以前沒有注意到，但事實證明這個對象實際上是「變形」的。我通過在轉換函數中執行console.log（d）而不是console.log（d.LAT）或console.log（data.lat），發現了這一點。

代替原來的JSON格式它轉化爲像這樣的：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]} 
]} 

所以，我需要的對象可以被訪問