Javascript D3-使链接在加载树时与节点一起流动

下面的代码表示使用D3.js构建的带有连接链接的流程图 一切正常，但我看到的一个问题是链接，现在先绘制链接，然后将节点转换/设置动画到各自的位置

如何使链接和节点同时过渡到它们的位置

var保证金={
前20名，
右:120,，
底数：20，
左：120，
},
宽度=960-margin.right-margin.left，
高度=800-margin.top-margin.bottom；
变量treeData=[{
“名称”：“根”，
“类型”：“决定”，
“id”：“根”，
“儿童”：[{
“名称”：“分析”，
“条件”：“假”，
“类型”：“决定”，
“价值”：“a+b”，
“id”：“child1”，
“儿童”：[{
“名称”：“区别”，
“类型”：“操作”，
“id”：“child2”，
“条件”：“真”，
“价值”：“5”，
}, {
“名称”：“无区别”，
“类型”：“操作”，
“id”：“child3”，
“条件”：“假”，
“价值”：“4”，
“儿童”：[…]，
}],
},
{
“条件”：“真”，
“名称”：“分部”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child33”，
“儿童”：[{
“条件”：“真”，
“名称”：“第1分部”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child44”，
“儿童”：[{
“条件”：“真”，
“名称”：“第1.1分部”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child599”，
“儿童”：[{
“条件”：“真”，
“名称”：“第1.1.34款”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child234234”，
“儿童”：[{
“条件”：“真”，
“名称”：“第1.1.434款”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child35343”，
“儿童”：[…]，
}],
}, {
“条件”：“真”，
“名称”：“第1.1.2款”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child77”，
“儿童”：[{
“条件”：“真”，
“名称”：“第1.1.1款”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child1222”，
“儿童”：[…]，
}, {
“条件”：“真”，
“名称”：“第1.1.1款”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child66”，
“儿童”：[…]，
}],
}],
}, {
“条件”：“真”，
“名称”：“存在重叠问题的节点”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child9090”，
“儿童”：[{
“条件”：“真”，
“名称”：“第1.1.1款”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child909090”，
“儿童”：[…]，
}],
}],
},
{
“条件”：“真”，
“名称”：“第2分部”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child55”，
“儿童”：[{
“条件”：“真”，
“名称”：“第2.1分部”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child88”，
“儿童”：[{
“条件”：“真”，
“名称”：“第2.1.1款”，
“类型”：“决定”，
“价值”：“a-b”，
“id”：“child99”，
“儿童”：[…]，
}],
}],
},
],
},
],
}];
var i=0，
持续时间=1000，
rectW=120，
rectH=60；
var treeMap=d3.tree（）
.nodeSize（[140120]）
.分离（功能（a、b）{
//如果他们有相同的父母
如果（a.parent==b.parent）{
//和都是叶节点还是都不是叶节点
//或者只有一个孩子（结果是直线下降）
如果（（a.children==未定义| | a.children.length{
zoomSvg.attr（'transform'，d3.event.transform）
}))
//在底部添加箭头，指向下一个决策。
append（“svg:defs”）
.selectAll（“标记”）
.data（[“end”]）//可以在此处定义不同的链接/路径类型
.输入（）
.append（“svg:marker”）//此部分在箭头中添加
.attr（“id”，字符串）
.attr（“视图框”，“0-5 10”）
.attr（“参考文献”，第15页）
.attr（“参考文献”，0.5）
.attr（“markerWidth”，4）
.attr（“markerHeight”，4）
.attr（“方向”、“自动”）
.append（“svg:path”）
.attr（“d”，“M0，-5L10,0L0,5”）；
root=d3.层次结构（treeData[0]，函数（d）{
返回d.儿童；
});
root.x0=0；
root.y0=0；
更新（根）；
d3.选择（“树形图”）
.样式（“高度”、“1000px”）；
//牵引树末端//
函数更新（源）{
const treeData=treeMap（根）；
//计算新的树布局。
var nodes=treeData.subjects（），
links=treeData.links（）；
//为固定深度进行规格化。
nodes.forEach（函数（d）{
d、 y=d.深度*90；
});
//更新节点…
var node=svg.selectAll（“g.node”）
.数据（节点、功能（d）{
返回d.data.id | |（d.id=++i）；
});
//在父节点的上一个位置输入任何新节点。
var nodeEnter=node.enter（）
.附加（“g”）
.attr（'transform'，'translate（'+source.x0+'，'+source.y0+'））
.attr（“类”、“节点”）
nodeEnter.append（'path'）
.attr（'d'，函数（d）{
if（d.data.type==='decision'）{
返回“M 60 0 120 30 60 0 30 Z”；
}else if（d.data.type=='action'）{
返回'M 0 120 0 120 60 0 60 Z'；
}否则{
返回'M-100-10-10-10-10-10-10-10-10-10Z'；
}
})
.attr（“笔划宽度”，1）
艾特先生