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函數中的返回語句 - 但這需要稍微多些工作。