由于此处的解决方案,我创建了力布局并且能够将一些节点放置在 map 上的经度和纬度位置:d3js force layout on a map .这是代码:(https://bl.ocks.org/pierreee1/85fcc11c8c1e230de510f15c255fbfe4)。
但是 map 不是很详细,所以我尝试使用 Leaflet map insted ( https://bl.ocks.org/pierreee1/cacba454f35e6be936abd4d6e5462ec0 )。
现在我无法正确放置节点,点击和鼠标悬停功能也不起作用。我错过了什么?有没有人有任何其他解决方案?
当我尝试放置传单 map 时,我遵循了本教程:https://chewett.co.uk/blog/1030/overlaying-geo-data-leaflet-version-1-3-d3-js-version-4/
最佳答案
好的,我不知道这是否是解决问题的最佳方法,但它对我有用:
我创建了一个更新节点位置并重新启动模拟的函数:
function drawAndUpdateCircles() {
//si tiene lon y lat clavelos al punto en el mapa
//gracias a Andrew Reid (user:7106086 en stackoverflow)
graph.nodes.forEach(function(d) {
if(d.lon && d.lat) {
p = new L.LatLng(d.lat, d.lon);
var layerPoint = map.latLngToLayerPoint(p);
d.fx = layerPoint.x;
d.fy = layerPoint.y;
}
})
// reinicie la simulación para que los puntos puedan quedar en donde son si se hace zoom o drag
fuerza
.alpha(1)
.restart()
;
}
然后我调用该函数并在 map 移动时将节点放置在 map 中:
drawAndUpdateCircles();
map.on("moveend", drawAndUpdateCircles);
关于javascript - d3js 在传单 map 上强制布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51617894/