Graph D3 force布局可以可视化多重图形吗？

看起来，如果D3 force布局中两个节点之间存在多个链接，D3只会选择一个，而忽略其他节点。可以将多重图可视化吗？

您可以通过创建一组链接，将多重图简单地编码为一个图形，其中每个链接都是以下形式的捆绑：

{"links": [/* one or more links*/], "source": …, "target": …}

然后，您可以按照常规运行强制导向布局来定位节点。然后，您需要适当地表示每个束，例如通过绘制平行线

---

相关：Mike Bostock使用了一个简单的hack来表示，尽管这不容易扩展到更多的链接。

因此，事实证明d3确实渲染了节点之间的多个链接，只是它将它们绘制在彼此的顶部。我解决这个问题的方法是将链接绘制为路径（而不是直线），并为每条路径添加不同的曲线。这意味着每个链接对象都需要一些东西来将其与源节点和目标节点相同的其他对象区分开来。我的链接如下所示：

links: [
  {"source": 0,"target": 1,"count": 1}, 
  {"source": 1,"target": 2,"count": 1},
  {"source": 1,"target": 3,"count": 1}, 
  {"source": 1,"target": 4,"count": 1},

  // same source and target with greater count
  {"source": 1,"target": 4,"count": 2}, 
  {"source": 1,"target": 4,"count": 3}, 
  {"source": 1,"target": 4,"count": 4}
]

然后路径渲染代码如下所示

function tick() {
  link.attr("d", function(d) {
    var x1 = d.source.x,
        y1 = d.source.y,
        x2 = d.target.x,
        y2 = d.target.y,
        dx = x2 - x1,
        dy = y2 - y1,
        // Set dr to 0 for straight edges.
        // Set dr to Math.sqrt(dx * dx + dy * dy) for a simple curve.
        // Assuming a simple curve, decrease dr to space curves.
        // There's probably a better decay function that spaces things nice and evenly. 
        dr = Math.sqrt(dx * dx + dy * dy) - Math.sqrt(300*(d.count-1)); 

   return "M" + x1 + "," + y1 + "A" + dr + "," + dr + " 0 0,1 " + x2 + "," + y2;
  });

  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

---

这是一个演示该方法的示例。

谢谢，这正是我要找的！