3

I'm trying to place a force layout node system on a map. SOME of the nodes have lon and lat values in the json file I'm using. Other nodes only need to be connected but not georeferenced. I would like to place in position the nodes which have lon and lat values and the others simply to be connected.

(I found this example which I followed but the nodes without lon and lat values are placed outside the svg: https://bl.ocks.org/cmgiven/4cfa1a95f9b952622280a90138842b79) I also tried to filter the nodes with lon and lat values but still no luck.

This is what I'm getting currently:

enter image description here

Here's my code:

var w = 1340;
var h = 620;

//Zoom del mapa porque panamá es muy peque en la aproyección
var zoomOffset = 75000;
var wOffset = 103300;
var hOffset = 11500;
var escala = 0.50;

//Tipo de proyección del mapa escalado y transladado
//posicion del mapa
var projection = d3.geoMercator()
                   .translate([w + wOffset, h + hOffset])
                   .scale([zoomOffset])
;

//Los paths que toman el tipo de proyección
var path = d3.geoPath().projection(projection);

//El "centro" del pais
var center = projection([9.018, -79.500])
;

//Esquema de colores
var color = d3.scaleOrdinal(d3.schemeCategory20);

//Define la siulación de fuerza
var fuerza = d3.forceSimulation()
                .force("link", d3.forceLink()
                    .id(function(d){
                        return d.id;
                    })
                .distance(40))
                .force("charge", d3.forceManyBody().strength(-5))
                .force("center", d3.forceCenter(w/2, h/2))
;

//Leer datos de ambos json y llamar la funcion que dibuja todo
d3.queue()
    .defer(d3.json, 'proyectos_v5.json')
    .defer(d3.json, 'panama.json')
    .awaitAll(dibujar)
;

//Leer los datos y dibujar los assets y el mapa
function dibujar (error, data){
    if (error) {throw error}

    //Leer los datos de los json y ponerlos en arreglos distintos
    var graph = data[0];
    var features = data[1].features;

    //Printea los datos para verificar
    console.log(graph);
    console.log(features);

    //Le dice a la simulación cuales son los nodos y los links
    fuerza.nodes(graph.nodes);
    fuerza.force("link").links(graph.edges);

    //svg en donde dibujar
    var svg = d3.selectAll("body")
            .append("svg")
            .attr('width', w)
            .attr('height', h)
    ;

    //grupo en donde esten todos los objetos draggeables
    var mapa = svg.append("g")
        .attr('id', "mapa") //para luego dibujar los circulos y el mapa
        //dibuja el mapa, sin zoom porque no se necesita
        .selectAll("path")
        .data(features)
        .enter()
            .append("path")
            .attr("d", path)
            .style('fill', "#EDEDED")
    ;

        //crea las lineas con un svg y los datos de "edges"
    var lineas = svg.append('g')
        .selectAll("line")
        .data(graph.edges)
        .enter()
            .append("line")
            .style("stroke", "black")
            .style('stroke-width', 1)
    ;

    //crea los nodos de acuerdo a los nombres
    var nodos = svg.append('g')
        .selectAll("circle")
        .data(graph.nodes)
        .enter()
            .append("circle")
            .style('fill', function(d, i){
            return color(i);
            })
            .attr('r',5 )
            .call(d3.drag()
            .on("start", dragInicia)
            .on("drag", dragging)
            .on("end", dragTermina)) //llama la el metodo de nodos dragg y le dice que hacer en cada momento
    ;

    nodos.append("title")
        .text(function(d){
            return d.id;
    });

    //simulación y actualizacion de la posicion de los nodos en cada "tick"
    fuerza.on("tick", function (){
        lineas
            .attr('x1', function(d){
                return d.source.x;
            })
            .attr('y1', function(d){
                return d.source.y;
            })
            .attr('x2', function(d){
                return d.target.x;
            })
            .attr('y2', function(d){
                return d.target.y;
            })
        ;

        nodos
        .attr('cx', function(d){
            if(d.fixed== true"){
                return projection([d.lon, d.lat])[0];
            } else {
                return d.x;
            }
        })
        .attr('cy', function(d){
            if(d.fixed== "true"){
                return projection([d.lon, d.lat])[1];
            } else {
                return d.y;
            }
        })
        ;       
    })

    //crea las funciones para saber qué hacer en cada momento del dragging
    function dragInicia(d){
        if (!d3.event.active) fuerza.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragging(d){
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }

    function dragTermina(d){
        if(!d3.event.active) fuerza.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }
};

and some of the json:

    {
    "id": "Urbanicación La Marina",
    "lat": 9.0463,
    "lon": -79.4204,
    "año": 2019,
    "tipo": "proyecto",
    "area": "urbano",
    "extension": "",
    "estado": "",
    "publico": "",
    "fixed": "true"
  },
  {
    "id": "Zona Logística del aeropuerto de Tocumen",
    "lat": 9.0567,
    "lon": -79.4191,
    "año": 2019,
    "tipo": "proyecto",
    "area": "urbano",
    "extension": "",
    "estado": "",
    "publico": "",
    "fixed": "true"
  },
  {
    "id": "100 ciudades resilentes",
    "lat": "",
    "lon": "",
    "año": "",
    "tipo": "actor",
    "area": "",
    "extension": "",
    "estado": "",
    "publico": "",
    "fixed": "false"
  },
  {
    "id": "ACOBIR",
    "lat": "",
    "lon": "",
    "año": "",
    "tipo": "actor",
    "area": "",
    "extension": "",
    "estado": "",
    "publico": "",
    "fixed": "false"
  }
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Bejuco
  • 133
  • 12
  • Can you share a few lines of your data (including both points with and without lat/longs)? – Andrew Reid Jul 18 '18 at 22:14
  • 1
    yep, I updated the question with a piece of the json! – Bejuco Jul 18 '18 at 22:18
  • singly draw a circle around some known node and then place the related nodes onto the circle; without coordinates it is probably no wonder they're off limits ... – Martin Zeitler Jul 18 '18 at 22:45
  • I could fix part of the problem by writing this on the .on("click" function: graph.nodes.forEach(function (d) { if(d.fixed=="true"){ var pos = projection([d.lon, d.lat]) d.x = pos[0] d.y = pos[1] } else { d.x = d.x; d.y = d.y; } }) – Bejuco Jul 18 '18 at 23:03

1 Answers1

1

This shouldn't be a problem. However, the approach you have so far will cause some problems. For example:

.attr('cy', function(d){
  if(d.fixed== "true"){
    return projection([d.lon, d.lat])[1];
  } else {
    return d.y;
  }
})

This approach might freeze the circle representing the node, but the node continues to move within the simulation. This will certainly cause visual problems when updating the links - they reference the simulation's position for a given node, not its visual position. This explains some of the odd links that aren't connected to nodes at one end in your image above.

Instead, lets set an fx and fy property for each node that has a latitude and longitude so that the simulation never changes its position, something like:

graph.nodes.forEach(function(d) {
    if(d.lon && d.lat) { 
        var p = projection([d.lon,d.lat]);
        d.fx = p[0];
        d.fy = p[1];
    }
})

d.fixed = true fixes nodes in v3, but d.fx and d.fy fix nodes in v4, see here

Now we can skip the if fixed == true check in the tick:

  .attr('cy', function(d){
      return d.y;  // d.y == d.fy if d.fy is set
   })

Now we have nodes that are fixed, but we should make sure that any dragging or other function which unfixes nodes doesn't unfix or move these projected nodes. For example with the drag functions:

function dragTermina(d){
    if (!d.lon ||!d.lat) {  // don't move nodes with geographic data
        if(!d3.event.active) force.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }
}

Also, since your visualization is anchored to the ground with geographic coordinates, we don't need to center the nodes with: .force("center", d3.forceCenter(w/2, h/2)).

Putting that together, with some made up data, I get:

 var width = 960;
 var height = 500;
 
 
 var graph = { nodes : [
  {id: "New York", lat: 40.706109,lon:-74.01194 },
  {id: "London", lat: 51.508070, lon: -0.126432 },
  {id: "Montevideo", lat: -34.901776, lon: -56.163983 },
  {id: "London-NewYork1" },
  {id: "London-NewYork2" },
  {id: "London-NewYork3" },
  {id: "Montevideo-London"}
   ],
      links : [
  { source: "New York", target: "London-NewYork1" },
  { source: "New York", target: "London-NewYork2" },
  { source: "New York", target: "London-NewYork3" },
  { source: "London-NewYork1", target: "London" },
  { source: "London-NewYork2", target: "London" },
  { source: "London-NewYork3", target: "London" } , 
  { source: "London", target: "Montevideo-London" },
  { source: "Montevideo-London", target: "Montevideo" }
   ]
 }
 
 
    var force = d3.forceSimulation()
        .force("link", d3.forceLink()
            .id(function(d){
                return d.id;
        })
        .distance(10))
        .force("charge", d3.forceManyBody().strength(-200));

  
 var svg = d3.select("body")
   .append("svg")
   .attr("width",width)
   .attr("height",height);
   
 var projection = d3.geoMercator()
   .center([0,10])
   .translate([width/2,height/2]);
   
 var path = d3.geoPath().projection(projection);
 
 var g = svg.append("g");
 
    d3.json("https://unpkg.com/world-atlas@1/world/110m.json").then(function(data) {
        g.selectAll("path")
          .data(topojson.object(data, data.objects.countries).geometries)
          .enter()
          .append("path")
          .attr("d", path)
    .attr("fill","lightgreen");
 
  var links = svg.append('g')
    .selectAll("line")
    .data(graph.links)
    .enter()
       .append("line")
    .attr("stroke-width", 2)
    .attr("stroke", "black");


     var nodes = svg.append('g')
          .selectAll("circle")
          .data(graph.nodes)
          .enter()
            .append("circle")
            .attr('r',5 )          
   .call(d3.drag()
            .on("start", dragInicia)
            .on("drag", dragging)
            .on("end", dragTermina));
   

 
    force.nodes(graph.nodes);
    force.force("link").links(graph.links);
 
 graph.nodes.forEach(function(d) {
  if(d.lon && d.lat) { 
   var p = projection([d.lon,d.lat]);
   d.fx = p[0];
   d.fy = p[1];
  }
 })
 
 //simulación y actualizacion de la posicion de los nodos en cada "tick"
    force.on("tick", function (){
        links
            .attr('x1', function(d){
                return d.source.x;
            })
            .attr('y1', function(d){
                return d.source.y;
            })
            .attr('x2', function(d){
                return d.target.x;
            })
            .attr('y2', function(d){
                return d.target.y;
            })
        ;

        nodes
        .attr('cx', function(d){
                return d.x;
        })
        .attr('cy', function(d){
                 return d.y;
        })
        ;       
    })
 
 
    function dragInicia(d){
        if (!d.lon || !d.lat) {
   if (!d3.event.active) force.alphaTarget(0.3).restart();
   d.fx = d.x;
   d.fy = d.y;
  }
    }

    function dragging(d){
  if (!d.lon || !d.lat) {
   d.fx = d3.event.x;
   d.fy = d3.event.y;
  }
    }

    function dragTermina(d){
        if (!d.lon ||!d.lat) {
   if(!d3.event.active) force.alphaTarget(0);
   d.fx = null;
   d.fy = null;
  }
    }
 
    
    });
  
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
Andrew Reid
  • 37,021
  • 7
  • 64
  • 83
  • You are a lifesaver! It works perfectly. Thank you very much. The only thing is that not connected nodes get out of the screen but I think that's a force issue. Anyway, thank you again. – Bejuco Jul 19 '18 at 15:10
  • 1
    @PierrePuentes, glad I could help. Yep, the nodes unconstrained by links might escape. You could try applying the d3.forceCenter again, but this probably won't achieve the desired result, instead you could try a [positioning force](https://github.com/d3/d3-force#positioning). Alternatively you could constrain the nodes, all of these should have a few questions/answers somewhere on stack overflow. One other option, which I don't think I've seen applied elsewhere, would be to apply the positioning force only to the disconnected nodes. – Andrew Reid Jul 19 '18 at 16:33
  • 1
    I applied a forceX and force Y to de simulation and a radio so the simulation has boundaries. It works just fine :) – Bejuco Jul 19 '18 at 16:46