D3强制布局可视化多图吗？

Question

似乎如果D3力布局中的两个节点之间存在多个链接,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.