D3：具有固定 Y 范围的强制布局 - 减少链接重叠答案

【问题标题】：D3: Force Layout with fixed Y ranges - Reducing link overlapD3：具有固定 Y 范围的强制布局 - 减少链接重叠
【发布时间】：2014-02-06 08:56:52
【问题描述】：

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

理想的配置是

但结果往往一团糟：

任何想法都将不胜感激

【问题讨论】：

【解决方案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);

变量“第一”：

var first = 1;

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

第一次通过后的屏幕截图：

第二遍后：

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

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

【讨论】：

这太棒了。请让我知道您将如何使图形具有确定性。
我正在考虑的一个领域是向每个节点添加一个订单，但订单将与相关节点相关。我已经更新了您的 plunkr 并添加了针对节点的订单字段。这可以用于图形的确定性版本吗？ plnkr.co/edit/NIXpbCHvTcCMxXM3Jm1h?p=preview

【解决方案2】：

在 D3 中实现的强制布局算法实际上不允许您这样做。它不会尽量减少交叉链接的数量——还有其他强制导向的布局实现（例如Fruchterman-Reingold）明确这样做，但它们没有在 D3 中实现。

所以简短的回答是，虽然您可能会获得适合特定情况的结果，但通常要做到这一点，您必须选择替代的强制布局实现。 sigma.js 有一个Fruchterman-Reingold implementation，如果您可以使用其他图形库。

【讨论】：

我看过 Sigma.js。它看起来真的很强大，可能更适合我，但它需要更多地挖掘代码才能让它工作。不幸的是，Fruchterman-Reingold 实现不适用于 sigma.js v1.0。此外，通读文档后，我认为没有办法在不编写完整的定制渲染器的情况下将“固定”y 水平应用于节点。你知道我将如何实现固定的 y 水平吗？如果没有，我现在可能会坚持使用 D3。
听起来要实现它需要相当多的工作。