Javascript D3树链接箭头很奇怪，不在正确的位置。如何修复它们？

我有一个D3树，我用下面的代码添加了箭头链接标记，但它们并不总是与链接匹配，就像它们位于父对象的右侧或左侧一样。我怎样才能把它修好，让它们看起来更好

 svg
    .append("svg:defs")
    .selectAll("marker")
    .data(["end"])
    .enter()
    .append("svg:marker")  
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 20)
    .attr("refY", function(d) {
        return 0
    })
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

我的树代码在下面，您可以看到它们的外观

var保证金={
前30名，
右:20,，
底数：20，
左：20
},
宽度=400-边距。右侧-边距。左侧，
高度=400-margin.top-margin.bottom；
var i=0，
持续时间=400，
根；
var tree=d3.layout.tree（）
.nodeSize（[5,5]）
.分离（功能分离（a、b）{
返回（a.parent==b.parent？1:2）/a.depth；
});
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.x，d.y]；
});
var svg=d3.选择（#呈现”）.追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.call（zm=d3.behavior.zoom（）.scaleExtent（[1,8]）。打开（“缩放”，重新绘制））
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
zm.translate（[40,40]）；
追加（“svg:defs”）。选择全部（“标记”）
.数据（[“结束”]）
.enter（）.append（“svg:marker”）
.attr（“id”，字符串）
.attr（“视图框”，“0-5 10”）
.attr（“参考文献”，20）
.attr（“参考文献”，功能（d）{
返回0
})
.attr（“markerWidth”，6）
.attr（“markerHeight”，6）
.attr（“方向”、“自动”）
.append（“svg:path”）
.attr（“d”，“M0，-5L10,0L0,5”）；
//为缩放而重新绘制
函数重画（）{
attr（“转换”，
“translate（“+d3.event.translate+”）
+“比例（“+d3.event.scale+”）；
}
变量节点={
名称：'根'，
类型：'根'，
儿童：[{
名称：‘A’，
类型：“儿童”
},
{
名称：‘B’，
类型：“儿童”
},
{
名称：‘C’，
类型：“儿童”
}]
};
根=节点；
root.y0=高度/2；
root.x0=0；
根。子。forEach（塌陷）；
更新（根）；
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 _儿童。forEach（崩溃）；
d、 children=null；
}
}
函数更新（源）{
var newHeight=Math.max（tree.nodes（root.reverse（）.length*30，height）；
d3.选择（“渲染svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，newHeight+margin.top+margin.bottom）；
tree=d3.layout.tree（）.size（[newHeight，width]）；
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
nodes.forEach（函数（d）{
d、 y=d.深度*80；
});
var node=svg.selectAll（“g.node”）
.数据（节点、功能（d）{
返回d.id | |（d.id=++i）；
});
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“translate”（“+source.x0+”，“+source.y0+”）；
})
。开启（“点击”，点击）；
诺丁特
.附加（“圆圈”）
.attr（“r”，1e-6）
.样式（“填充”，功能（d）{
返回d.endNode？“橙色”：“浅蓝色”；
});
nodeEnter.append（“文本”）
.attr（“y”，函数（d）{
返回-20；
})
.attr（“dy”，“.35em”）
.attr（“文本锚定”，函数（d）{
返回“中间”；
})
.文本（功能（d）{
返回d.name；
})
.样式（“填充不透明度”，1e-6）；
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
节点更新。选择（“圆圈”）
.attr（“r”，10）
.样式（“填充”，功能（d）{
返回d.endNode？“橙色”：“浅蓝色”；
});
nodeUpdate.select（“文本”）
.样式（“填充不透明度”，1）；
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+source.x+”，“+source.y+”）；
})
.remove（）；
nodeExit.select（“圆”）
.attr（“r”，1e-6）；
nodeExit.select（“文本”）
.样式（“填充不透明度”，1e-6）；
var link=svg.selectAll（“path.link”）
.数据（链接、功能（d）{
返回d.target.id；
});
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“d”，函数（d）{
变量o={
x:source.x0，
y:source.y0
};
返回对角线({
资料来源：o，
目标：o
});
})
.attr（“标记结束”、“url（#结束）”）；
link.transition（）
.持续时间（持续时间）
.attr（“d”，对角线）；
link.exit（）.transition（）
.持续时间（持续时间）
.attr（“d”，函数（d）{
变量o={
x:source.x，
y:来源，y
};
返回对角线({
资料来源：o，
目标：o
});
})
.remove（）；
nodes.forEach（函数（d）{
d、 x0=d.x；
d、 y0=d.y；
});
}
功能点击（d）{
var children=d.children | |[]；
对于（变量i=0；i<1；i++）{
推({
姓名：d.id+1，
类型：'child'，
endNode:true
});
}
d、 儿童=儿童；
更新（d）；
}

#渲染{
溢出：自动；
文本对齐：居中；
}
#render.node{
光标：指针；
}
#渲染节点圆{
填充：#fff；
笔画：钢蓝；
笔划宽度：1.5px；
}
#渲染.节点文本{
字体：16px“Hiragino Sans GB”华文细黑", "",微软雅黑", "Microsoft YaHei“，SimHei，“Helvetica Neue”，Helvetica，Arial，无衬线字体！重要；
}
#渲染链接{
填充：无；
冲程：#ccc；
笔划宽度：1.5px；
}

---

标记高度为6px，圆圈半径为10px。因此，在

对角线

函数中，让我们将路径的端点向上移动16px（即，

6+10

）：

当然，不要忘记相应地更改标记'

refX

属性（即减去

16

）

这是您进行更改的代码，我还删除了文本以更好地查看路径和标记：

var保证金={
前30名，
右:20,，
底数：20，
左：20
},
宽度=400-边距。右侧-边距。左侧，
高度=400-margin.top-margin.bottom；
var i=0，
持续时间=400，
var diagonal = d3.svg.diagonal()
    .target(function(d) {
        var o = d.target;
        o.y = o.y - 16
        return o;
    })
    .projection(function(d) {
        return [d.x, d.y];
    });