Javascript d3.json（）未定义的googleoverlay

我对编码非常陌生，并尝试实现以下代码：。我不是从本地.json文件读取json，而是从url读取json，不幸的是，LAT和LONG是字符串，所以我使用data.forEach（）解析它们，但当我在data.forEach（）外部调用解析的d.LAT和d.LONG时，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);
}); 

---

虽然其他地方可能有错误，但我相信你会发现以下几句话让你感到悲伤：

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

在Mike的bl.ock中，他使用d3.entries（），您也一样。D3条目获取一个具有n个属性的对象，并创建一个具有n个对象的数组，每个对象表示一个属性。您的数据已经是一个对象数组。查看

d3.entries（）

返回的数据和his：

迈克的bl.ock：

var数据={“KMAE”：[-120.12,36.98，“马德拉市机场”[26,1,2,5,6,3,2,1,2,7,29,12,3]，“KSJC”：[-121.92,37.37，“圣何塞国际机场”[28,1,1,1,6,10,5,3,2,4,14,21,7]]
console.log（d3.entries（data））
虽然其他地方可能有错误，但我相信您会发现以下几行让您感到悲伤：

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

在Mike的bl.ock中，他使用d3.entries（），您也一样。D3条目获取一个具有n个属性的对象，并创建一个具有n个对象的数组，每个对象表示一个属性。您的数据已经是一个对象数组。查看
d3.entries（）
返回的数据和his：

迈克的bl.ock：


var数据={“KMAE”：[-120.12,36.98，“马德拉市机场”[26,1,2,5,6,3,2,1,2,7,29,12,3]，“KSJC”：[-121.92,37.37，“圣何塞国际机场”[28,1,1,1,6,10,5,3,2,4,14,21,7]]
console.log（d3.entries（data））
我在发布这个问题后不久就设法让它工作了。我以前没有注意到，但事实证明，这个对象确实进行了“变换”。我是通过在转换函数中执行console.log（d）而不是console.log（d.LAT）或console.log（data.LAT）来发现这一点的

它不是原始的JSON格式，而是转换为如下内容：

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

所以我需要的对象可以通过：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]))     
      }

在发布这个问题后不久，我就设法让它起作用了。我以前没有注意到，但事实证明，这个对象确实进行了“变换”。我是通过在转换函数中执行console.log（d）而不是console.log（d.LAT）或console.log（data.LAT）来发现这一点的

它不是原始的JSON格式，而是转换为如下内容：

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

所以我需要的对象可以通过：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]))     
      }