我正在使用 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[了解更多]
最佳答案
在 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 .
关于javascript - 并非所有 d3 点都显示在传单 map 上的正确位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41402972/