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]} 
]} 

所以，我需要的对象可以被访问