1

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). enter image description here

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

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/

Bejuco
  • 133
  • 12
  • Its possible that the leaflet map has click and mouseover functions which are superseding your forcegraph functions. You may want to check this https://gis.stackexchange.com/questions/54454/disable-leaflet-interaction-temporary – Coola Aug 01 '18 at 12:33

1 Answers1

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);
Bejuco
  • 133
  • 12