d3js Force Layout on a Leaflet map

Question

I created a force layout and I was able to place some nodes in a lon and lat position over a map thanks to a solution in here: d3js force layout on a map . Here's the code: ( https://bl.ocks.org/pierreee1/85fcc11c8c1e230de510f15c255fbfe4 ).

But the map is not very detailed so I tried to use a Leaflet map insted ( https://bl.ocks.org/pierreee1/cacba454f35e6be936abd4d6e5462ec0 ).

Now I can't place correctly the nodes and the click and mouseover functions don't work. What am I missing? Does anyone have any other solution?

I followed this tutorial when I tried to place the leaflet map: https://chewett.co.uk/blog/1030/overlaying-geo-data-leaflet-version-1-3-d3-js-version-4/

Answer 1

Ok, I don't know if this is the best way to solve the problem but it worked for me:

I created a function where the nodes position is updated and the simulation is restarted:

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

And then I call the function and place the nodes in the map qhen it moves:

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