graph - D3 力布局可以可视化多图吗？

Question

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

Answer 1

所以，事实证明 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 + ")"; });
}

这是一个 jsfiddle这证明了这种方法。