并非所有的d3点都在小册子地图上显示在正确的位置

  • Z时代
  • 2024-01-10
  • 分类：问答

我使用this作为起点。我使用.nest（）和d.values.length来驱动圆的半径。并非所有的d3点都在小册子地图上显示在正确的位置

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

更新改变单张-src.js与我得到这个错误的原代码后消息：TypeError：latlng未定义[了解更多内容]

回答：

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

无论如何，你不需要索引到values数组中，因为所有的lat和long都是相同的，你可以使用0。所以简化整个更新功能：

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

此外，请注意，您的地图集中在新西兰的某个地方，而你的纬度和多头都在美国西部。

Full code is here。

以上是 并非所有的d3点都在小册子地图上显示在正确的位置 的全部内容， 来源链接： utcz.com/qa/266821.html

回到顶部