我正在尝试使用d3和传单的组合来绘制一些经/纬度坐标。
我有一个嵌套的JSON瓦特/地理坐标,名称为allSFEvents
:
@context: "http://schema.org"
@type: "MusicEvent"
endDate: "2019-01-27"
image: ""
location:
@type: "Place"
address: "San Francisco, CA"
geo:
@type: "GeoCoordinates"
latitude: 37.775
longitude: -122.4183333
__proto__: Object
name: "Natoma Cabana"
__proto__: Object
name: "Winter Olympics"
performer: {url: "https://www.bandsintown.com/a/217960-
winter-olympics?came_from=244", image: "", @type:
"MusicGroup", name: "Winter Olympics"}
startDate: "2019-01-27"
url: "https://www.bandsintown.com/e/1013280443-winter-olympics-at-natoma-cabana?came_from=244"
__proto__: Object
我然后通过循环allSFEvents
:
allSFEvents.forEach(function(d) {
for (var key in allSFEvents) {
d.latLong = new L.LatLng(allSFEvents[key].location.geo.latitude,
allSFEvents[key].location.geo.longitude);
console.log(d.latLong)
}
})
万事大吉。 console-logging d.latLongs
会打印每个不同的经/纬对。
我使用d3和传单约定映射坐标:
var events = mapG.selectAll("circle")
.data(allSFEvents)
.enter().append("circle")
.style("stroke", "blue")
.attr("class", 'events')
.style("fill", 'blue')
控制台日志记录events
给出了不同的圆圈,以及不同的经/纬对。
因此,问题似乎在最后一步中发生:
function drawAndUpdateEventCircles() {
events.attr("transform",
function(d) {
var layerPoints = map.latLngToLayerPoint(d.latLong);
console.log(d.latLong)//returns the same lat/long pair over and over
return "translate("+ layerPoints.x +","+ layerPoints.y +")";
}
)
}
drawAndUpdateEventCircles();
map.on("moveend", drawAndUpdateEventCircles);
如果我CONSOLE.LOG d.latLong
之内drawAndUpdateEventCircles
功能,它读取反复相同的纬度/经度对(从最后一个条目allSFEvents
),并且因此仅一个映射单数点。所以我想知道为什么我无法将forEach
函数中的d.latLong传递给drawAndUpdateEventCircles
函数?感谢所有提前。