Javascript 对层次结构使用d3 curvestep

我正在尝试使用D3构建类似于层次结构的东西，对此我是相当陌生的。这就是我所指的完成它

我参考了以下链接以获得这种特定方式的链接/连接器

使用d3

使用d3（连杆径向）

我在开发人员控制台中多次遇到以下错误：

Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "function line

.节点圆{
填充：#fff；
笔画：钢蓝；
笔画宽度：3px；
}
.节点文本{
字体：12px无衬线；
}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：2px；
}

---

您遇到的问题是d3.line接受一个点数组。您不会在任何地方将数组传递给d3.line

对角线函数应类似于：

function diagonal(array) {
     let line = d3.line()
       .x(function(d) { return d.y; })
       .y(function(d) { return d.x; }) // inverted x/y as you have a horizontal tree
       .curve(d3.curveStep);

     return line(array);
}

通常，每个链接数据都是一个对象，具有源和目标的属性，我们需要将包含源和目标的数组传递给对角函数：

.attr("d", function(d) {
  return diagonal([d.source,d.target])       
})

或等效数组

由于您使用节点本身作为链接数据，我们仍然可以使用相同的原则：

.attr("d", function(d) {
  return diagonal([d,d.parent])
})

或者，使用具有x/y特性的对象构造数组。在您的情况下，我们需要构造一些对象来表示直线生成器的点，因为您正在存储我们需要访问的旧定位数据：

例如：

var treeData=
{
“名称”：“顶级”，
“儿童”：[
{ 
“名称”：“2级：A”，
“儿童”：[
{“姓名”：“儿子”}，
{“姓名”：“A的女儿”}
]
},
{“名称”：“级别2:B”}
]
};
//设置图表的尺寸和边距
var margin={顶部：20，右侧：90，底部：30，左侧：90}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“转换”
+margin.left+”，“+margin.top+”）；
var i=0，
持续时间=750，
根；
//声明树布局并指定大小
var treemap=d3.tree（）.size（[height，width]）；
//指定父对象、子对象、高度和深度
root=d3.hierarchy（treeData，函数（d）{返回d.children；}）；
root.x0=高度/2；
root.y0=0；
//在第二层之后崩溃
根。子。forEach（塌陷）；
更新（根）；
//折叠节点及其所有子节点
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children
d、 _儿童。forEach（崩溃）
d、 children=null
}
}
函数更新（源）{
//为节点指定x和y位置
var treeData=树映射（根）；
//计算新的树布局。
var nodes=treeData.subjects（），
links=treeData.subjects（）.slice（1）；
//为固定深度进行规格化。
forEach（函数（d）{d.y=d.depth*180}）；
//*******************节点部分***************************
//更新节点。。。
var node=svg.selectAll（'g.node'）
.data（节点，函数（d）{返回d.id | |（d.id=++i）}）；
//在父对象的上一个位置输入任何新模式。
var nodeEnter=node.enter（）.append（'g'）
.attr（'类'，'节点'）
.attr（“转换”，函数（d）{
返回“translate”（“+source.y0+”，“+source.x0+”）；
})
.on（'点击'，点击）；
//为节点添加圆
nodeEnter.append（'circle'））
.attr（'类'，'节点'）
.attr（'r'，1e-6）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
});
//为节点添加标签
nodeEnter.append（'text'）
.attr（“dy”，“.35em”）
.attr（“x”，函数（d）{
返回d.children | | d.| U儿童？-13:13；
})
.attr（“文本锚定”，函数（d）{
返回d.children | d.| u children？“结束”：“开始”；
})
.text（函数（d）{返回d.data.name；}）；
//更新
var nodeUpdate=nodenter.merge（节点）；
//转换到节点的正确位置
nodeUpdate.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+d.y+”，“+d.x+”）；
});
//更新节点属性和样式
nodeUpdate.select（'circle.node'）
.attr（'r'，10）
.样式（“填充”，功能（d）{
返回d.(儿童？)浅蓝色“：“黑色”；
})
.attr（“光标”、“指针”）；
//删除任何现有节点
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+source.y+”，“+source.x+”）；
})
.remove（）；
//退出时，将节点圆的大小减小为0
nodeExit.select（'circle'）
.attr（'r'，1e-6）；
//退出时减少文本标签的不透明度
nodeExit.select（'text'）
.样式（“填充不透明度”，1e-6）；
//*******************链接部分***************************
//更新链接。。。
var link=svg.selectAll（'path.link'）
.数据（链接，函数（d）{返回d.id；}）；
//在父对象的上一个位置输入任何新链接。
var linkEnter=link.enter（）.insert（'path'，'g'）
.attr（“类”、“链接”）
.attr（'d'，函数（d）{
//var o={x:source.x0，y:source.y0}
返回对角线（[{x:d.parent.x0，y:d.parent.y0}，{x:d.parent.x0，y:d.parent.y0}]）
});
//更新
var linkUpdate=linkEnter.merge（link）；
//转换回父元素位置
linkUpdate.transition（）
.持续时间（持续时间）
.attr（'d'，函数（d）{
//返回对角线（d，d.父项）
返回对角线（[{x:d.parent.x，y:d.parent.y}，d]）//此处的更改
});
//删除任何现有链接
var linkExit=link.exit（）.transition（）
.持续时间（持续时间）
.attr（'d'，函数（d）{
var o={x:source.x，y:source.y}
返回对角线