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}, 
        ] 

은 경로 모양이 경우 타원형의 경로입니다 tick 기능에 정의되어

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

샘플 코드는, 그래서 당신이해야 할 모든 설정 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 함수에서 return 문을 변경해야하는 타원의 경로를 변경할 수도 있습니다.하지만 약간 더 많은 작업이 필요합니다.