D3.js 在父级的上一个位置。 link.enter（）插入（“路径”，“g”） .attr（“类”、“链接”） .style（“笔划”，（d）=>{ 设respuesta=d.target.respuesta； if（respuesta==“SI”）{ 返回“#2a8841”； }否则如果（respuesta==“否”）{ 返回“#d44646”； }否则{ 返回“#b7b7”； } }) .attr（“x”，rectW/2） .attr（“y”，矩形/2） .attr（“d”，函数（d）{ 变量o={ x:source.x0， y:source.y0 }; 返回对角线({ 资料来源：o， 目标：o }); }); //过渡链接到他们的新位置。 link.transition（） .持续时间（持续时间） .attr（“d”，对角线）； //将退出节点转换到父节点的新位置。 link.exit（）.transition（） .持续时间（持续时间） .attr（“d”，函数（d）{ 变量o={ x:source.x， y:来源，y }; 返回对角线({ 资料来源：o， 目标：o }); }) .remove（）； 链接。附加（“文本”）。文本（“otros”） //将旧位置隐藏起来，以便过渡。 nodes.forEach（函数（d）{ d、 x0=d.x； d、 y0=d.y； }); } //在单击时切换子项。 功能点击（d）{ 如果（d.儿童）{ d、 _children=d.children； d、 children=null； }否则{ d、 儿童=d.\U儿童； d、 _children=null； } 更新（d）； } //为缩放而重新绘制 函数重画（）{ //log（“这里”，d3.event.translate，d3.event.scale）； attr（“转换”， “translate（“+d3.event.translate+”）+ “比例（“+d3.event.scale+”）； } .node{ 光标：指针； } .节点圆{ 填充：#fff； 笔画：钢蓝； 笔划宽度：1.5px； } .节点文本{ 字体：10px无衬线； } .链接{ 填充：无； 冲程：#ccc； 笔划宽度：1.5px； } 身体{ 溢出：隐藏； }

不要覆盖源和目标的

基准。这意味着您将无法重新绘制树，因为您将覆盖它所需的所有值

另外，不要使用
getBoundingClientRect（）
。如果缩放或平移会怎么样？它会变形，线永远不会在正确的位置

相反，依赖于您已经提供给节点的数据，您已经拥有了这些数据，您可以通过调用
.datum（）
来访问这些数据，而无需任何参数！然后，计算节点的位置就没有问题了，而且无论缩放还是滚动，在需要的位置添加一行也没有问题


var-width=960，
高度=800；
var i=0，
持续时间=750，
rectW=100，
rectH=30；
var tree=d3.layout.tree（）.nodeSize（[220,40]）；
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.x+rectW/2，d.y+rectH/2]；
});
var svg=d3.选择（“正文”）.append（“svg”）.attr（“宽度”，1000）.attr（“高度”，1000）.样式（“边框”，“1px实心红色”）
.call（zm=d3.behavior.zoom（）.scaleExtent（[0.3,3]）。on（“zoom”，redraw））.append（“g”）.attr（“id”，“g_main”）
.attr（“转换”、“转换”（+350+）、“+20+”）；
//必要的，以便缩放知道从何处缩放和取消缩放
zm.translate（[350,20]）；
变量根={
“名称”：“node6”，
“儿童”：[{
“名称”：“节点5”，
“respuesta”：“SI”，
“儿童”：[{
“名称”：“节点4”，
“儿童”：[{
“名称”：“节点3”
}]
}]
}, {
“名称”：“节点2”，
“回复”：“否”
},
{
“名称”：“节点1”，
“respuesta”：“SI”
}
]
}
root.x0=0；
root.y0=高度/2；
根。子。forEach（塌陷）；
更新（根）；
root.x0=0；
root.y0=高度/2；
设置超时（（）=>{
让source=d3。选择（“#node4”）.datum（）；
让target=d3。选择（“#node6”）.datum（）；
d3.选择（“#g#U main”）。追加（“行”）
.style（“笔划”、“黑色”）//为线条上色
.attr（“x1”，source.x0+rectW/2）//x行第一个端点的位置
.attr（“y1”，source.y0）//行第一个端点的y位置
.attr（“x2”，target.x0+rectW/2）//x线路第二端的位置
.attr（“y2”，target.y0+rectH）；//行第二个端点的y位置
}, 1000)
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 _儿童。forEach（崩溃）；
//d.children=null；
}
}
根。子。forEach（塌陷）；
更新（根）；
d3.选择（“#体”）样式（“高度”、“800px”）；
函数更新（源）{
//计算新的树布局。
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
//为固定深度进行规格化。
nodes.forEach（函数（d）{
d、 y=d.深度*180；
});
//更新节点…
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+”）；
})
nodeEnter.append（“rect”）
.attr（“id”，函数（d）{
返回“节点”+d.id
})
.attr（“宽度”，rectW）
.attr（“高度”，矩形）
.attr（“笔划”、“白色”）
.attr（“笔划宽度”，1）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
});
nodeEnter.append（“image”）.attr（“href”，“plus flat.png”）.attr（“width”，“d）=>{
设长度=0；
如果（d.儿童）{
长度=d.儿童长度；
}否则{
长度=0；
}
如果（d.name==“INICIO”&&length==0）{
返回0；
}else if（d.name==“INICIO”&&length！=0）{
返回0；
}否则{
返回25；
}
}).style（“转换”、“转换（65px，-10px）”）
nodeEnter.append（“文本”）
.attr（“x”，rectW/2）
.attr（“y”，矩形/2）
艾特先生(
setTimeout(() => {
    let source = d3.select("#node4");
    let target = d3.select("#node6");
    source.datum(source.node().getBoundingClientRect())
        .attr('nodeX', d => d.x + d.width / 2)
        .attr('nodeY', d => d.y + d.height / 2)

    target.datum(target.node().getBoundingClientRect())
        .attr('nodeX', d => d.x + d.width / 2)
        .attr('nodeY', d => d.y + d.height / 2)

    d3.select("#g_main").append("line")
        .style("stroke", "black") // colour the line
        .attr("x1", source.attr('nodeX')) // x position of the first end of the line
        .attr("y1", source.attr('nodeY')) // y position of the first end of the line
        .attr("x2", target.attr('nodeX')) // x position of the second end of the line
        .attr("y2", target.attr('nodeY')); // y position of the second end of the line

}, 5000)