在d3中,假设有node1和node2,由水平相邻的圆表示。有一条短的水平线(我想是一条路径)连接节点1和节点2。
如何:(1) 找到该直线/路径的中点,以及(2) 为该中点指定一个新的名称或ID,我可以通过编程进行处理,这样我就可以(3) 绘制从中点到新节点3、节点4和节点5的新垂直线/路径?
您可以找到每条线的中点,并使用下面的代码绘制从该点到其他节点的线。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);