并非所有d3点都显示在传单上的正确位置 [英] Not all d3 points are showing in correct position on leaflet map
问题描述
我使用
控制台显示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 ）
.data（data）
.enter（）。append（circle）
.style（stroke，black）
.style ，.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）;
returntranslate （+
map.latLngToLayerPoint（d.LatLng）.x +，+
map.latLngToLayerPoint（d.LatLng）.y +）;
}
）
}
更新更改为leaflet-src.js与原始代码我收到此错误消息：TypeError：latlng is undefined [了解更多]
在此行 d.values [i] .LatLng ， i 这里是您的数据的索引绑定（ mediacount 数组）。它不是某种索引到 mediacount 数组中的值数组。
无论如何，你不需要在values数组中有一个索引，因为所有的lat和long都是一样的，你可以使用 0 。因此，将整个更新函数简化为：
function update（）{
feature.attr （d，i）{
var coor = map.latLngToLayerPoint（d.values [0] .LatLng）;
returntranslate（+
coor.x +，+
coor.y +）;
}）;
}
另外请注意，您的地图以新西兰的某个地方为中心， lat和long在美国西部。
完整代码是此处。
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]
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.
这篇关于并非所有d3点都显示在传单上的正确位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
