javascript - 并非所有 d3 点都显示在传单 map 上的正确位置

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] 未定义。我已经尝试了几次迭代 (d.values[i].LatLng) 有和没有 [i] 并且我仍然没有在正确的位置得到所有的圆圈你可以看到它们都聚集在左上角。最终目标是将此 map 与交叉过滤器一起使用，以在另一个图表中创建交互性。

数据如下:

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

更新 使用原始代码更改为 leaflet-src.js 后，我收到此错误消息:TypeError: latlng is undefined[了解更多]

Answer 1

在 d.values[i].LatLng 这一行中，i 是您的数据绑定(bind)的索引(mediacount 数组).它不是 mediacount 数组内的 values 数组的某种索引。

无论如何，您不需要值数组的索引，因为它们的所有纬度和经度都相同，您可以只使用 0。所以将整个更新函数简化为:

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

另外请注意，您的 map 以新西兰的某个地方为中心，而您的纬度和经度位于美国西部。

完整代码是 here .