D3.js 特定深度处的d3群集布局节点未对齐

我有以下JSFIDLE代码：

我希望

node2

和

node3

垂直对齐，因为它们处于相同的深度

我还希望所有叶节点也对齐

---

但是，此代码仅对齐叶节点，其余节点处于不同级别

最简单的方法是使用树布局，它在

深度处对齐节点

，然后将叶节点移动到最大深度的位置

var root = getData();
var nodes = tree.nodes(root);
var links = tree.links(nodes);
var maxY = d3.max(nodes, d => d.y);
var linkSources = new Set(links.map(d => d.source.name));
nodes.forEach( d => { if (!linkSources.has(d.name)) { d.y = maxY; } });

一个完整的例子：

var宽度=500，
高度=500；
var直径=300；
var持续时间=2000年；
var tree=d3.layout.tree（）
.尺寸（[高度、宽度-160]）；
var diagonal=d3.svg.diagonal（）
.投影（函数（d）{返回[d.y，d.x]；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“翻译（80,0）”）；
var root=getData（）；
var节点=tree.nodes（根）；
var links=tree.links（节点）；
var maxY=d3.max（节点，d=>d.y）；
var linkSources=newset（links.map（d=>d.source.name））；
nodes.forEach（d=>{if（！linkSources.has（d.name））{d.y=maxY；}}）；
var link=svg.selectAll（“.link”）
.数据（链接）
.输入（）
.append（“路径”）
.attr（“类”、“链接”）
.style（“笔划”、“8da0cb”）
.attr（“d”，对角线）；
var node=svg.selectAll（“.node”）
.数据（节点）
.输入（）
.附加（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“translate”（“+d.y+”，“+d.x+”）；
})
node.append（“圆”）
.attr（“r”，4.5）；
node.append（“文本”）
.attr（“dx”，函数（d）{返回d.children？-8:8；}）
.attr（“dy”，3）
.style（“文本锚定”，函数（d）{返回d.children？“结束”：“开始”}）
.text（函数（d）{返回d.name；}）；
函数getData（）{
返回{
名称：“node1”，
id:“1”，
儿童：[
{
名称：“node2”，
id:“2”，
儿童：[
{
名称：“node5”，
id:“5”，
儿童：[
{
名称：“node6”，
id:“6”，
儿童：[
{
名称：“node7”，
id:“7”，
}
]
}
]
}
]
},
{
名称：“node3”，
id:“3”，
儿童：[
{
名称：“node8”，
id:“8”，
}
]
},
{
名称：“node4”，
id:“4”，
}
]
};
}

。节点圆{
填充：#fff；
笔画：钢蓝；
笔划宽度：1.5px；
}
.节点{
字体：10px无衬线；
}
.链接{
填充：无；
中风：谭；
笔划宽度：1.5px；
}

---

非常棒的解决方案