使用d3和d3 flextree插件绘制链接

Question

我(仍然(试图用D3和D3 flextree插件制作一个组织结构图。我很难绘制节点之间的链接。我使用的"等式"考虑节点的中间(正如我所理解的(，而我想从节点的末端绘制

我想我的错误在于我的绘图链接功能

function diagonal(s, d) {
path = `M ${s.x} ${s.y}
L ${s.x} ${(s.y + d.y) * 0.5},
${d.x} ${(s.y + d.y) *  0.5 },
${d.x} ${d.y}`
return path
}

很难解释，所以我做了一个JSFiddle：https://jsfiddle.net/ymv5sr9k/11/
在这个例子中，由于填充正确，所有链接都是我想要的方式，但一旦nodeSize发生变化(请参见大节点(，它就会全部断开。我想我需要一个更通用的绘图链接功能，但我无法计算

感谢阅读，
缩放

Answer 1

问题解决了！正如我在评论中所说，我需要移动水平线。我在我的两个y"控制点"中添加了nodeSize。nodeSize实际上是source.y - destination.y - padding。这是我的最后一个方程式：

function diagonal(s, d) {
var nodeSize = s.y - d.y - 30
return "M" + s.x + "," + s.y
+ "L" + s.x + "," + (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," +  (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," + d.y;
};

感谢您抽出时间！