d3.js中两个节点之间的多条直线

Question

如何在两个节点之间添加多条直线。下面的小提琴显示弧线。可以用线条之间的特定空间直线改变它。 我找到答案。
但是在下面的小提琴http://jsfiddle.net/manimegala/FC832/可以在两个节点之间画出多条线。但是，当我拖动一个节点时，链接会相互重叠。请帮助我在两个节点之间画出多条不重叠的线。 样本数据

"links":[ 
        {"source":0,"target":1,"value":1,"distance":5,"no":1}, 
        {"source":0,"target":1,"value":1,"distance":5,"no":2}, 
        {"source":0,"target":1,"value":1,"distance":5,"no":3},     

        {"source":0,"target":1,"value":1,"distance":6,"no":4}, 
        {"source":0,"target":1,"value":1,"distance":6,"no":5}, 
        {"source":6,"target":0,"value":1,"distance":6,"no":1}, 
        {"source":7,"target":1,"value":1,"distance":6,"no":1}, 
        {"source":8,"target":0,"value":1,"distance":6,"no":1}, 
        {"source":7,"target":8,"value":1,"distance":6,"no":1}, 
        ] 

示例代码

force.on("tick", function() { 
      link.attr("x1", function(d) { return d.source.x+(d.no*4);}) 
       .attr("y1", function(d) { return d.source.y+(d.no*4);}) 
       .attr("x2", function(d) { return d.target.x+(d.no*4);}) 
       .attr("y2", function(d) { return d.target.y+(d.no*4);}); 

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

http://jsfiddle.net/manimegala/FC832/

Answer 1

的路径形状在tick功能在这种情况下是椭圆形路径限定，因此，所有需要做的是设置博士为0，喜欢;

function tick() { 
    path.attr("d", function(d) { 
    var dx = d.target.x - d.source.x, 
     dy = d.target.y - d.source.y, 
     dr = 0; //set this to 0 
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 
    }); 

当然，你会失去一些链接连接的信息，因为它们会互相叠加。

您也可以从椭圆中更改路径，这将需要更改tick函数中的返回语句 - 但这需要稍微多些工作。