Javascript 如何修复d3.js中的可扩展树？

我正在尝试使用d3.js实现一个可扩展和可折叠的树。 但它似乎不起作用

有人能建议如何解决这个问题吗

我的意思是我不能像下面的演示那样扩展和切换它：

以下是我在vue.js中的实现：

var-app=新的Vue({
el:“#应用程序”，
安装的（）{
可变宽度=960，
高度=500；
//将svg对象附加到页面主体
const svg=d3.select（createSvg``）；
常数g=svg
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（'transform'，'translate（100，${height/2}）`）
常数持续时间=750；
设i=0，
根=d3.层次结构（树形数据，函数（d）{
返回d.儿童；
});
//第二关后崩塌
根。子。forEach（塌陷）；
root.x0=0；
root.y0=0；
//反转尺寸参数，以保持水平布局中的顺序
loopOverHierarchy（树数据，d=>{
if（数组isArray（d.size））{
如果（！d._size）d._size=d.size.slice（）；
d、 size=d._size.slice（）.reverse（）；
}
})
const flexLayout=flextree.flextree（）；
更新（根）；
//折叠节点及其所有子节点
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children
d、 _儿童。forEach（崩溃）
d、 children=null
}
}
函数loopOverHierarchy（d，回调）{
撤回（d）；
if（d.children）d.children.forEach（c=>loopOverHierarchy（c，callback））
if（d._children）d._children.forEach（c=>loopOverHierarchy（c，callback））
}
函数更新（源）{
//将x和y位置指定给节点
var treeData=flexLayout（根）；
//切换水平布局的x和y坐标
每个（d=>{
常数x=d.x；
d、 x=d.y；
d、 y=x；
})
//计算新的树布局。
var nodes=treeData.subjects（），
links=treeData.subjects（）.slice（1）；
//*******************节点部分***************************
//更新节点。。。
var node=g.selectAll（'g.node'）
.data（节点，d=>d.id | |（d.id=++i））；
//在父对象的上一个位置输入任何新模式。
var nodeEnter=node.enter（）.append（'g'）
.attr（'类'，'节点'）
.attr（“转换”，函数（d）{
返回“translate”（“+source.x0+”，“+source.y0+”）；
})
.on（'点击'，点击）；
//为节点添加圆
nodeEnter.append（'circle'））
.attr（'类'，'节点'）
.attr（'r'，1e-6）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
});
//为节点添加标签
nodeEnter.append（'text'）
.attr（'指针事件'，'无'）
.attr（'dy'，'0.35em'））
.文本（功能（d）{
返回d.data.name；
})
.attr（'text-anchor'，'middle'）
//更新
var nodeUpdate=nodenter.merge（节点）
.attr（“填充”、“fff”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划宽度”、“3px；”）
.style（'font'，'12px无衬线'）
//转换到节点的正确位置
nodeUpdate.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（事件、i、arr）{
const d=d3.选择（this）.datum（）；
返回“translate”（“+d.x+”，“+d.y+”）；
});
//更新节点属性和样式
nodeUpdate.select（'circle.node'）
.attr（'r'，20）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
})
.attr（“光标”、“指针”）；
//删除任何现有节点
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（事件、i、arr）{
const d=d3.选择（this）.datum（）；
返回“translate”（“+source.x+”，“+source.y+”）；
})
.remove（）；
//退出时，将节点圆的大小减小为0
nodeExit.select（'circle'）
.attr（'r'，1e-6）；
//退出时减少文本标签的不透明度
nodeExit.select（'text'）
.样式（“填充不透明度”，1e-6）
//*******************链接部分***************************
//更新链接。。。
var link=g.selectAll（'path.link'）
.数据（链接、功能（d）{
返回d.id；
});
//在父对象的上一个位置输入任何新链接。
var linkEnter=link.enter（）.insert（'path'，'g'）
.attr（“类”、“链接”）
.attr（'d'，函数（d）{
变量o={
x:source.x0，
y:source.y0
}
返回对角线（o，o）
});
//更新
var linkUpdate=linkEnter.merge（链接）
.attr（“填充”、“无”）
.attr（“笔划”，“#ccc”）
.attr（“笔划宽度”，“2px”）
//转换回父元素位置
linkUpdate.transition（）
.持续时间（持续时间）
.attr（'d'，函数（d）{
返回对角线（d，d.父项）
});
//删除任何现有链接
var linkExit=link.exit（）.transition（）
.持续时间（持续时间）
.attr（'d'，函数（事件、i、arr）{
const d=d3.选择（this）.datum（）；
变量o={
x:source.x，