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.
Comments
Post a Comment