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

Question

我创建了一个图表，其中每个节点都适合一个固定的 y 范围。我正在使用强制布局来显示图形，但我不知道如何确保出现最少的交叉链接 - 一些交叉是不可避免的。我认为它是重力、力、linkDistance 等的组合，但我的更改似乎都不起作用

图表位于: http://plnkr.co/edit/wyWjk37mkDCWcwpZvzxe?p=preview

理想的配置是

但结果往往一团糟:

任何想法将不胜感激

Answer 1

看看这个example .

这是您的示例，但稍作修改。基本思想是分两次进行强制布局:

• 首先将允许更宽松的布局方式:节点将被允许偏离它们的“水平”；这将允许自发地跳过另一个以获得更好的链接布局(更少的交叉点)
• 第二个将节点“返回”到它们各自的级别

代码的关键部分:

自定义力:

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

布局定义:

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

调用 force.start() 两次:

force
  .nodes(graph.nodes)
  .links(graph.links)
  .on("tick", tick)
  .start();

setTimeout(function() {
  first = 0;
  force.start();
}, 6000);  

变量“第一”:

首先变量 = 1;

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

第一次通过后的截图:

第二次通过后:

我会尝试改进这个例子，这是一个有点“肮脏”的开发原型(prototype)，但我现在没有时间，也许明天吧。

编辑:注意:我只是注意到实际上数据是恒定的，但是，布局因模拟而异。这不一定是那样的。它可以更具确定性。我明天也会尝试解决这个问题。我还将使用“结束”事件更好地链接布局。