graph - D3: Force Layout with fixed Y ranges - Reducing link overlap -

i have created graph each node fits 1 of fixed y ranges. using force layout display graph don't know how ensure minimum of crossed links occurs - crossing inevitable. think combination of gravity, force, linkdistance etc. none of changes seem work

the graph located at: http://plnkr.co/edit/wywjk37mkdcwcwpzvzxe?p=preview

the ideal configuration

but comes out mess:

any thoughts appreciated

take @ example.

this example, little bit modified. basic idea forced layout in 2 passes:

• first allow little bit more relaxed way of layout: nodes allowed deviate "level"; allow spontaneous jumping 1 on achieve better link layout (less intersection)
• second "return" nodes respective level

key portions of code:

custom force:

  graph.nodes.foreach(function(o, i) {     o.y += (y(o.level) - o.y) * k;    }); 

layout definition:

  var force = d3.layout.force()     .charge(-1000)     .gravity(0.2)     .linkdistance(30)                         .size([width, height]) 

calling force.start() 2 times:

force   .nodes(graph.nodes)   .links(graph.links)   .on("tick", tick)   .start();  settimeout(function() {   first = 0;   force.start(); }, 6000);   

variable "first":

var first = 1;

  if(first) {     var k = e.alpha;   }   else{     var k = 10 * e.alpha;   } 

screenshot after first pass:

after second pass:

i'll try improve example, little bit "dirty" development prototype, don't have time right now, maybe tomorrow.

edit: note: noticed data constant, and, however, layout differs simulation simulation. doesn't have way. can more deterministic. i'll try fix tomorrow. i'll better chaining layouts "end" event.