Javascript 隐藏在矩形内的链接中的箭头

我正在尝试向布局中添加箭头，但它不起作用。问题是箭头没有显示在正确的位置，而是在我为每个节点绘制的矩形内。解决这个问题最好的办法是什么？我尝试过改变链接的坐标，但没有成功，也改变了对角线对象，但没有成功

我正在连接一个MWE以便您可以查看当前状态

var数据={
“姓名”：“夏娃”，
“儿童”：[
{
“姓名”：“该隐”
},
{
“姓名”：“赛斯”，
“儿童”：[
{
“名称”：“Enos”
},
{
“名称”：“诺姆”
}
]
},
{
“姓名”：“亚伯”
},
{
“姓名”：“阿万”，
“儿童”：[
{
“名称”：“以诺”
}
]
},
{
“姓名”：“阿祖拉”
}
]
};
让宽度=$（document.width（）；
设高度=$（文档）.height（）；
常数DX=80；
常数DY=80；
常数最小值=0.15；
const MAX_ZOOM=无穷大；
const RECT_WIDTH=40；
const RECT_HEIGHT=15；
const TRANSITION_DURATION=700；
让tree=d3.tree（）.nodeSize（[DX，DY]）；
设对角线=d3.linkVertical（）
.x（d=>d.x+矩形宽度/2）
.y（d=>d.y+RECT_高度/2）；
函数createRoot（）{
设root=d3.层次结构（数据）；
root.x0=DX/2；
root.y0=0；
root.subjects（）.forEach（（d，i）=>{
d、 id=i；
//用户单击时隐藏和显示节点的辅助变量
d、 _children=d.children；
//第一眼看到时只显示根目录
如果（d.depth>=0）d.children=null；
});
返回根；
}
函数更新（源）{
const nodes=root.subjects（）.reverse（）；
const links=root.links（）；
//计算新的树布局
树（根）；
const transition=svg.transition（）
.持续时间（过渡时间）
.tween（“resize”，window.ResizeObserver？null:（）=>（）=>svg.dispatch（“toggle”）；
/*=================================================================================================================================*/
//获取所有节点
const node=gNode.selectAll（“g”）
.数据（节点，d=>d.id）；
//在父节点的上一个位置输入任何新节点。
const nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，d=>`translate（${source.x0}，${source.y0}）`）
.打开（“单击”，功能（事件，d）{
if（d.children）//节点展开->折叠
塌陷（d）；
else//节点折叠->展开
d、 孩子们
//如果我们想重新启动，最后一个状态就足够了
//d、 children=d.children？空：d.\u children；
更新（d）；
中心节点（d）；
})
.attr（“指针事件”，d=>d._子项？“全部”：“无”）；
nodeEnter.append（“rect”）
//两个不同的班级，一个是树叶班，另一个是其他班
.attr（“类”，d=>d._子项？“可扩展”：“叶”）
.attr（“高度”，矩形高度）
.attr（“宽度”，矩形宽度）
nodeEnter.append（“文本”）
//文本的位置居中
.attr（“x”，矩形宽度/2）
.attr（“y”，矩形高度/2）
.text（d=>d.data.name）
.clone（true）.lower（）；
//将节点转换到其新位置（更新）
node.merge（nodeEnter）.transition（transition）
.attr（“transform”，d=>`translate（${d.x}，${d.y}）`）
//显示节点
.attr（“填充不透明度”，1）
.attr（“笔划不透明度”，1）；
/*将退出节点转换到父节点的新位置*/
node.exit（）.transition（transition）.remove（）
.attr（“transform”，d=>`translate（${source.x}，${source.y}）`）
//隐藏节点
.attr（“填充不透明度”，0）
.attr（“笔划不透明度”，0）；
/*==============================================================================================================================*/
const link=gLink.selectAll（“路径”）
.data（links，d=>d.target.id）；
//在父对象的上一个位置输入任何新链接
const linkEnter=link.enter（）.append（“路径”）
.attr（“类”、“链接”）
.attr（“x”，矩形宽度/2）
.attr（“y”，矩形高度/2）
.attr（“标记端”、“url（#端）”）//将箭头添加到链接端
.attr（“d”，d=>{
常数o={x:source.x0，y:source.y0}；
返回对角线（{source:o，target:o}）；
})
//过渡链接到新位置
link.merge（linkEnter）.transition（transition）
//在这种情况下，链接将是相同的，但会被转换移动
.attr（“d”，对角线）；
//将退出节点转换到父节点的新位置
link.exit（）.transition（transition.remove（））
.attr（“d”，d=>{
常数o={x:source.x，y:source.y}；
返回对角线（{source:o，target:o}）；
});
//将旧位置隐藏起来，以便过渡
root.eachBefore（d=>{
d、 x0=d.x；
d、 y0=d.y；
});
}
函数中心节点（源）{
让scale=d3.zoomTransform（d3.select（“svg”）.node（））.k；
设x=-source.x0*比例+宽度/2-矩形宽度/2*比例；
设y=-source.y0*比例+高度/2-校正高度/2*比例；
//定义转换
const transition=svg.transition（）
.持续时间（过渡时间）
.tween（“resize”，window.ResizeObserver？null:（）=>（）=>svg.dispatch（“toggle”）；
//根据前面的参数移动所有节点
svg.transition（转换）
.call（zoomBehaviours.transform，d3.zoomIdentity.translate（x，y）.scale（scale））；
}
函数折叠（节点）{
if（node.children）{//展开
node.children=null；
节点。\u子节点forEach（折叠）
}
}
//根创建
常数根=c
.attr("d", d => {
  return diagonal({
    source: d.source,
    target: {
      x: d.target.x,
      y: d.target.y - RECT_HEIGHT
    }
  })
});