Javascript d3:计算两个节点之间的直线中点,绘制一条从它到新节点成90度角延伸的直线
在d3中,假设存在节点1和节点2,由水平相邻的圆表示。有一条短的水平线(我想是一条路径)连接节点1和节点2 我如何: (1) 找到该直线/路径的中点,然后 (2) 给这个中点一个新的名称或ID,我可以通过编程来使用它,这样我就可以Javascript d3:计算两个节点之间的直线中点,绘制一条从它到新节点成90度角延伸的直线,javascript,d3.js,Javascript,D3.js,在d3中,假设存在节点1和节点2,由水平相邻的圆表示。有一条短的水平线(我想是一条路径)连接节点1和节点2 我如何: (1) 找到该直线/路径的中点,然后 (2) 给这个中点一个新的名称或ID,我可以通过编程来使用它,这样我就可以 (3) 绘制从该中点到新节点3、节点4和节点5的新垂直线/路径?您可以找到每条线的中点,并使用下面的代码绘制从该点到其他节点的线 不熟悉d3,但通过添加两个端点并除以2,可以找到任何直线的中点。提供一些代码来显示您迄今为止所做的尝试总是很有用的。这是一个基本的三角问题
(3) 绘制从该中点到新节点3、节点4和节点5的新垂直线/路径?您可以找到每条线的中点,并使用下面的代码绘制从该点到其他节点的线
不熟悉d3,但通过添加两个端点并除以2,可以找到任何直线的中点。提供一些代码来显示您迄今为止所做的尝试总是很有用的。这是一个基本的三角问题,不是d3的问题。
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);