使用D3.js V4的缩进树

我试图使用D3.js V4显示缩进树视图，但由于某些原因，我无法使矩形以正确的顺序显示（父子关系）

级别2:B应显示在与级别2:A相同的x位置，但y的位置似乎是错误的。我希望是这样的：

谁能告诉我我做错了什么

我是D3新手，所以请提前道歉。 下面是我的代码片段：

var treeData=
{
“名称”：“顶级”，
“父项”：“null”，
“儿童”：[
{
“名称”：“2级：A”，
“父级”：“顶级”，
“儿童”：[
{
“姓名”：“人子”，
“家长”：“2级：A级”，
“儿童”：[
{
“姓名”：“儿子之子”，
“父母”：“一个孩子的儿子”
}
]
}，//儿童
{
“姓名”：“A的女儿”，
“父级”：“级别2:A”
}
]
},
{
“名称”：“2级：B级”，
“父级”：“顶级”
}
]
}
var margin={顶部：30，右侧：20，底部：30，左侧：20}，
宽度=960-margin.left-margin.right，
杆高=30，
条形宽度=宽度*.1；
高度=600；
var i=0，
持续时间=400，
根；
var tree=d3.tree（）
.nodeSize（[0,20]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（'viewBox'，'0-10'+宽度+''+500）
//.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var root=d3.hierarchy（treeData，函数（d）{返回d.children；}）；
更新（根）；
函数更新（源）{
//计算展平的节点列表。TODO使用d3.layout.hierarchy。
节点=树（根）.substands（）；
console.log（节点）
变量高度=数学最大值（500，nodes.length*barHeight+margin.top+margin.bottom）；
d3.选择（“svg”）.transition（）
.持续时间（持续时间）
.attr（“高度”，高度）；
//计算“布局”。
forEach（函数（n，i）{
n、 x=i*30；
});
//更新节点…
var node=svg.selectAll（“g.node”）
.data（节点，函数（d）{返回d.id | |（d.id=++i）}）；
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+source.y+”，“+source.x+”）”）；}）
.样式（“不透明度”，1e-6）；
//在父节点的上一个位置输入任何新节点。
nodeEnter.append（“rect”）
.attr（“y”，-barHeight/2）
.attr（“高度”，barHeight）
.attr（“宽度”，barWidth）
.样式（“填充”，颜色）
。开启（“点击”，点击）；
nodeEnter.append（“文本”）
.attr（“dy”，3.5）
.attr（“dx”，5.5）
.文本（功能（d）{
返回d.depth==0？d.data.name+“>>>”：d.depth==1？d.data.name+“>>”：d.data.name；}）；
//将节点转换到其新位置。
nodeEnter.transition（）
.持续时间（持续时间）
.attr（“transform”，函数（d）{return“translate”（“+d.y+”，“+d.x+”）”）；}）
.样式（“不透明”，1）；
node.transition（）
.持续时间（持续时间）
.attr（“transform”，函数（d）{return“translate”（“+d.y+”，“+d.x+”）”）；}）
.style（“不透明度”，1）
.选择（“rect”）
.样式（“填充”，颜色）；
//将退出节点转换到父节点的新位置。
node.exit（）.transition（）
.持续时间（持续时间）
.attr（“transform”，函数（d）{return“translate”（“+source.y+”，“+source.x+”）”）；}）
.样式（“不透明度”，1e-6）
.remove（）；
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）；
}
功能色（d）{
返回d.#children？#3182bd:d.children？#c6dbef:“浅绿色”；
}

.node rect{
光标：指针；
填充：#fff；
填充不透明度：.5；
行程：#3182bd；
笔画宽度：1px；
}
.节点文本{
字体：10px无衬线；
指针事件：无；
}
路径链接{
填充：无；
行程：#9ecae1；
笔划宽度：1.5px；
}