すべてのd3ポイントがリーフレットの正しい位置に表示されているわけではありません

Question

私はthisを出発点として使用しています。私は円の半径を駆動するために.nest（）とd.values.lengthを使用しています。

 d3.tsv("DH_Doig.tsv", function(data) { 
     // Add a LatLng object to each item in the dataset 
     data.forEach(function(d) { 
     d.LatLng = new L.LatLng(d.SoundLat, 
      d.SoundLon) 
     }) 
     //console.log(data); 

     var mediacount = d3.nest() 
     .key(function(d) { return d.LatLng; }) 
     .entries(data); 
     //console.log(JSON.stringify(mediacount)); 

     var feature = g.selectAll("circle") 
     .data(mediacount) 
     .enter().append("circle") 
     .style("stroke", "black") 
     .style("opacity", .6) 
     .style("fill", "red") 
     .attr("r", function(d) { return d.values.length*3; }); 
     //.attr("r", 20); 

     map.on("viewreset", update); 
     update(); 

     function update() { 
     //console.log(JSON.stringify(mediacount)); 
     feature.attr("transform", 
     function(d, i) { 
     console.log(d.values[i].LatLng); 
     return "translate("+ 
     map.latLngToLayerPoint(d.values[i].LatLng).x +","+ 
     map.latLngToLayerPoint(d.values[i].LatLng).y +")"; 
     } 
     ) 
     } 

コンソールは、2つのオブジェクトを示し、次いでd.valuesを示し、[I]は未定義です。私は[i]の有無にかかわらず（d.values [i] .LatLng）のいくつかの反復を試みましたが、右上のすべてのサークルが左上隅に集まっているのを見ることはできません。最終的には、このマップをクロスフィルターとともに使用して、別のチャートでインタラクティビティを作成することになります。ここで

はデータです：

ID SoundLat SoundLon 
1 47.763848 -122.298382 
2 47.842667 -112.6427 
3 47.842667 -112.6427 
4 47.842667 -112.6427 
5 48.3385647 -124.665896 
6 48.145537 -123.188611 
7 48.145537 -123.188611 
8 48.145537 -123.188611 
9 48.145537 -123.188611 
10 48.145537 -123.188611 
11 46.33 -111.5 
12 46.33 -111.5 
13 46.33 -111.6 
14 46.33 -111.6 
15 44.741085 -110.994736 
16 46.273156 -110.8070191 
17 46.725217 -110.859201 

このコードは動作します：

var feature = g.selectAll("circle") 
     .data(data) 
     .enter().append("circle") 
     .style("stroke", "black") 
     .style("opacity", .6) 
     .style("fill", "red") 
     //.attr("r", function(d) { return d.values.length*3; }); 
     .attr("r", 20); 

     map.on("viewreset", update); 
     update(); 

     function update() { 
     //console.log(JSON.stringify(mediacount)); 
     feature.attr("transform", 
     function(d, i) { 
     //console.log(d.values[i].LatLng); 
     return "translate("+ 
     map.latLngToLayerPoint(d.LatLng).x +","+ 
     map.latLngToLayerPoint(d.LatLng).y +")"; 
     } 
     ) 
     } 

更新元のコードで-src.jsリーフレットするために変更した後、私はこのエラーを取得していますメッセージ：TypeError：latlngは未定義です[詳細はこちら]

Answer 1

このライン内d.values[i].LatLng、iここにデータバインディングのインデックス（mediacount配列）があります。 mediacount配列内のvalues配列への何らかの種類のインデックスではありません。

緯度と経度がすべて同じで、0しか使用できないため、値配列にインデックスを追加する必要はありません。だから、全体に更新機能を簡素化：あなたの緯度とlong型は、米国西部にありながら、ノート、また

function update() { 
    feature.attr("transform", function(d,i){ 
     var coor = map.latLngToLayerPoint(d.values[0].LatLng); 
     return "translate(" + 
      coor.x + "," + 
      coor.y + ")"; 
    }); 
    } 

、あなたのマップは、ニュージーランドのどこかに集中しています。

フルコードはhereです。