DataMaps.js - Network Weather-map (inbound and outbound arcs)

Question

I am trying to use Datamaps using the arcs and circles option to create a network weathermap.

The basic issue I'm hitting is that there are inbound and outbound connections in a network and I'd like to be able to visualize them as separate entities. To avoid the incoming and outgoing overlapping, I tried doing a simple longitude and latitude offset (- .2 each) to "offset" the path. What I'm seeing is that they cross-over each other.

Any ideas on how I might be able to do this?

Current Map Image

Answer 1

I had the same issue take a look at https://github.com/cpmarvin/d3js_weathermap . If you have parallel links then you need get the nr of links btw nodes and do an offset. Take a look at https://github.com/cpmarvin/d3js

Hope it helps.

.attr("d", function(d) {
    //find middle value of the link and calculate path
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);

    var endX = (d.target.x + d.source.x) / 2;
    var endY = (d.target.y + d.source.y) / 2;

    var len = dr - ((dr/2) * Math.sqrt(3));
    endX = endX + (1 * len/dr);
    endY = endY + (-1 * len/dr);

    return "M" + d.source.x + "," + d.source.y + "L" + endX + "," + endY;
} )

this is based on :

Display an arrow head in the middle of D3 force layout link