1

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

Jason Normandin
  • 21
  • 1
  • 1
    What if you created a second arc generator (if this is what is happening), and make one larger than the other? That way they would not overlap, but would still be somewhat distinct. – JSBob Apr 29 '16 at 15:17
  • 1
    you could use a color transition on the arcs, i.e. when arc is going out, you use green and when arc is coming in, you transition the color to red or something. – paradite Apr 29 '16 at 15:25

1 Answers1

0

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

Community
  • 1
  • 1
Cmarv
  • 141
  • 9
  • Please don't provide link-only answers: if the link gets broken, the answer becomes irrelevant. Instead, put the most important parts to your post directly and make sure the result is an answer, not a comment. – YakovL Apr 02 '17 at 16:20