javascript - d3 : Calculate midpoint of line between two nodes, 画线从它延伸90度 Angular 到一个新节点

Question

在 d3 中，假设有 node1 和 node2，用水平相邻的圆圈表示。有一条短的水平线(我猜是一条路径)连接 node1 和 node2。

我如何:(1) 找到那条线/路径的中点，并且(2) 给那个中点一个新的名称或 ID，我可以通过编程方式使用它，这样我就可以(3) 从该中点到新的 node3、node4 和 node5 绘制新的垂直线/路径？

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);