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); 
}); 

URL内の

JSONオブジェクトの例私が読んでいる：

[{"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)) 

マイクのbl.ockでは、彼はあなたのようにd3.entries（）を使います。 D3のエントリは、n個のプロパティを持つオブジェクトを受け取り、それぞれがプロパティを表すn個のオブジェクトを持つ配列を作成します。あなたのデータはです。すでにのオブジェクトの配列です。

マイクの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()リターンを見てみましょう

あなたのデータは、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.LAT）やconsole.log（data.lat）の代わりに、変換関数でconsole.log（d）を実行することでこれを発見しました。

{[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]))  
     } 

をする代わりに、それはこのようなものに変換元JSON形式の