箭头未触及树布局中d3.js中的节点

我使用的d3树有500多个节点（一个根节点和第二级的500/1000子节点）。箭头看起来非常完美，最多50个子节点，但比左侧和右侧节点上的箭头多，在节点和路径顶部显示的箭头与节点边成对角线相交。

---

如何解决这个问题，使箭头接触到路径与节点相交的节点？使用的节点是矩形的，如本问题所示

好的，好的，这是您的解决方案。这就是我所说的“后退”方法。这和我以前用的方法是一样的。它的工作原理是拟合路径，然后从中减去正方形加标记头的“半径”

首先，您只需要添加一次“marker”def，它可以用于所有行。第二，我把路径切换为自上而下，你让他们画我想画的东西——从孩子到父母。这需要额外旋转头部

代码如下：

var宽度=500；
var高度=500；
var节点宽度=40；
var节点高度=40；
循环变异系数=5；
var图布局；
变量graphData={
“节点”：[{
“uid”：“Term20”，
“名称”：“第20条”，
“image”：“images/Term.png”
}, {
“uid”：“glossforArrow”，
“名称”：“glossforArrow”，
“image”：“images/Glossary.png”
}, {
“uid”：“Term43”，
“名称”：“Term43”，
“image”：“images/Term.png”
}, {
“uid”：“Term1”，
“名称”：“Term43”，
“image”：“images/Term.png”
}, {
“uid”：“Term2”，
“名称”：“Term43”，
“image”：“images/Term.png”
}],
“链接”：[{
“来源”：“glossforArrow”，
“目标”：“第20条”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第43条”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“Term1”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“Term3”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第4条款”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第5条款”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第6条款”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第7条款”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第8条款”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第9条款”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“Term2”，
“方向”：“输出”，
“标签”：“自有条款”
}]
};
树初始化（图形数据）
函数树初始化（图形数据）{
diagramLayout=d3。选择（“diagramLayout”）
.attr（“id”、“diagramLayout”）//设置id
.attr（“宽度”，宽度）//设置宽度
.attr（“高度”，高度）//设置高度
.附加（“g”）
.attr（“转换”、“转换”（“+20+”，“+20+”））
markerRefx=40；
var data2=graphData.links.filter（函数（l）{
if（l.target==未定义和&l.source==未定义）{
返回false；
}否则{
返回true；
}
});
push（JSON.parse（'{“target”：“glossforArrow”，“source”：“}'））
var treeData=d3.stratify（）.id（函数（d）{
返回d.target；
}).parentId（函数（d）{
返回d.source；
})（数据2）
节点=d3.层次结构（树形数据，函数（d）{
返回d.儿童；
});
var levelWidth=[1]；
var childCount=函数（级别，n）{
如果（n.children&&n.children.length>0）{
如果（levelWidth.length好的，好的，这是你的解决方案。这就是我所说的“后退”方法。这与我在中使用的方法相同。它的工作原理是拟合路径，然后从中减去正方形加标记头的“半径”

首先，你只需要添加一次“marker”def，它可以用于所有线条。其次，我将路径切换为自上而下绘制，你让他们绘制我将全部向后绘制的内容-从子对象到父对象。这需要额外的头部旋转

代码如下：


var宽度=500；
var高度=500；
var节点宽度=40；
var节点高度=40；
循环变异系数=5；
var图布局；
变量graphData={
“节点”：[{
“uid”：“Term20”，
“名称”：“第20条”，
“image”：“images/Term.png”
}, {
“uid”：“glossforArrow”，
“名称”：“glossforArrow”，
“image”：“images/Glossary.png”
}, {
“uid”：“Term43”，
“名称”：“Term43”，
“image”：“images/Term.png”
}, {
“uid”：“Term1”，
“名称”：“Term43”，
“image”：“images/Term.png”
}, {
“uid”：“Term2”，
“名称”：“Term43”，
“image”：“images/Term.png”
}],
“链接”：[{
“来源”：“glossforArrow”，
“目标”：“第20条”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第43条”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“Term1”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“Term3”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第4条款”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第5条款”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第6条款”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第7条款”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“第8条款”，
“方向”：“输出”，
“标签”：“自有条款”
}, {
“来源”：“glossforArrow”，
“目标”：“T