d3 : 두 노드 사이의 선의 중간 점을 계산하고 그 노드와 90도 각도로 새 선을 그립니다.

Question

d3에서 노드 1과 노드 2가 있다고 가정합니다. 노드 1과 노드 2는 서로 옆에 수평으로 원으로 표시됩니다. 노드 1과 노드 2를 연결하는 짧은 수평선 (경로)이 있습니다. (1) 그 라인/경로의 중간 점을 찾아 (2) 그 중간 점을 나는 (3) 그릴 수 있도록 내가 프로그래밍 작업을 할 수있는 새로운 이름이나 ID를 제공 :

내가 어떻게

그 중간 점에서 새 노드 3, 노드 4 및 노드 5로가는 새로운 수직선/경로?

Answer 1

아래 코드를 사용하여 각 선의 중간 점을 찾고 해당 점에서 다른 노드로 선을 그립니다. JSFiddle

function drawLines(d){ 
    var x1 = nodes[d.source].x; 
    var x2 = nodes[d.target].x; 
    var y1 = nodes[d.source].y; 
    var y2 = nodes[d.target].y; 
    var otherNodes = nodes.filter(function(n,i){ return i!=d.source || i!=d.target }); 
    otherNodes.forEach(function(otherNode){ 
     svg.append("line") 
      .attr("x1",function(d){ return otherNode.x; }) 
      .attr("y1",function(d){ return otherNode.y; }) 
      .attr("x2",function(d){ return (x1+x2)/2; }) 
      .attr("y2",function(d){ return (y1+y2)/2; }) 
      .attr("class","line"); 
    }); 

} 
linksEls.each(drawLines); 

D3에 익숙하지