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]我仍然没有得到正确位置的所有圆圈你可以看到它们全部聚集在左上角。目标是最终将此地图与crossfilter一起使用，以在另一个图表中创建交互性。

以下是数据：

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 [了解更多] < / p>

Answer 1

在这一行d.values[i].LatLng中，i这里是数据绑定的索引（mediacount数组）。它不是values数组中mediacount数组的某种索引。

无论如何，您不需要对数组数组建立索引，因为它们的纬度和长度都相同，您可以使用0。因此，将整个更新功能简化为：

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

另外，请注意，您的地图位于新西兰的某个地方，而您的地图位于美国西部。

完整代码为here。

并非所有d3点都显示在传单地图上的正确位置

1 个答案: