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