传单地图上的d3js强制布局

时间:2018-07-31 16:19:13

标签: javascript html json d3.js

我创建了一个力布局,由于d3js force layout on a map中的解决方案,我能够在地图上的纬度和经度位置放置一些节点。以下是代码:(https://bl.ocks.org/pierreee1/85fcc11c8c1e230de510f15c255fbfe4)。 enter image description here

但是地图不是很详细,因此我尝试使用插入的Leaflet地图(https://bl.ocks.org/pierreee1/cacba454f35e6be936abd4d6e5462ec0)。 enter image description here

现在,我无法正确放置节点,并且单击和鼠标悬停功能不起作用。我想念什么?有人有其他解决方案吗?

当我尝试放置传单地图时,我遵循了本教程:https://chewett.co.uk/blog/1030/overlaying-geo-data-leaflet-version-1-3-d3-js-version-4/

1 个答案:

答案 0 :(得分:1)

好吧,我不知道这是否是解决问题的最佳方法,但对我有用:

我创建了一个函数,该函数可以更新节点位置并重新启动仿真:

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()
        ;
    }

然后我调用该函数并将节点在移动时放置在地图中:

    drawAndUpdateCircles();
    map.on("moveend", drawAndUpdateCircles);

如果要查看结果,可以签出以下内容:https://bl.ocks.org/pierreee1/5a4f856a04299fb223f3eceee1642fe3/ae5b21a0fd8dd59c9d310f4cad4e59503b43627a