Not all d3 points are showing in correct position on leaflet map

Question

I'm using this as a starting point. I am using .nest() and d.values.length to drive the radius of the circles.

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

The console shows 2 objects and then indicates d.values[i] is undefined. I have tried several iterations of (d.values[i].LatLng) with and without the [i] and I'm still not getting all of circles in the right spots you can see them all clustered in the upper left corner. The goal is eventually to use this map with crossfilter to create interactivity in another chart.

Here is the data:

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

This code works:

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

Update After changing to leaflet-src.js with the original code I'm getting this error message: TypeError: latlng is undefined[Learn More]

Are you sure you fixed the problem from your question [*"Issue with leaflet.js “viewreset” map not zooming out properly"*](/q/39580150)? This sounds pretty much the same. If there are `null` values for `SoundLat` or `SoundLon` this will break creation of a `new L.LatLng()`, subsequently break the nest and, eventually, result in the error when trying to read the `values` property of that nest. — altocumulus, Dec 30 '16 at 22:53
I have attached the tsv data there are no null values. I also added the code that works, it's the .nest() that screwing this up. — mutanthumb, Dec 31 '16 at 18:47

score 3 · Accepted Answer · answered Jan 01 '17 at 21:43

In this line d.values[i].LatLng, i here is the index of your data-binding (the mediacount array). It is not some sort of index into the values array inside the mediacount array.

Regardless, you don't need an index into the values array since all their lat and long will be the same and you can just use 0. So simplify the whole update function to:

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

Also, note, your map is centered on someplace in New Zealand, while your lat and longs are in the western United States.

Full code is here.

Yes that did the trick! I had forgotten that by the time the made it the "feature" that all of the coordinates would be the same. My map starting point is: var map = L.map('map').setView([45.573, -114.967], 6); — mutanthumb, Jan 03 '17 at 16:54

Not all d3 points are showing in correct position on leaflet map

1 Answers1

Linked