D3.js 将d3js树折叠到指定深度

一般来说，我对d3js和javascript都是新手。我正在尝试创建一个包含8000多个节点的树，并使用了可用的基本树示例，并进行了修改以垂直显示

示例数据是硬编码的，但是，在本地服务器上，我从外部JSON文件读取数据

我希望能够指定开始时的深度级别（折叠所有节点深度大于2），并允许用户进一步扩展或折叠节点

我试图修改“折叠”函数来检查深度级别，但是，逻辑不正确

感谢您在这方面的帮助

//------------------
变量数据=[{“sid”：“1”，“父项”：“null”，“name_ar”：“Hashim”}，{“sid”：“2”，“父项”：“1”，“name_ar”：“wahb”}，{“sid”：“3”，“父项”：“1”，“name_ar”：“Abdulmuttaleb”}，{“sid”：“4”，“父项”：“2”，“name_ar”：“Amina”}，{“sid”：“5”，“父项”：“3”，“name_ar”}，{“sid”：“Abutaleb“3”、“name_-ar”：“Hamza”；“sid”；“9”、“家长”；“6”、“name_-ar”；“穆罕默德（先知）”；“sid”；“10”、“家长”；“9”、“name_-ar”；“Alqassim”；“sid”；“11”、“家长”；“9”、“name_-ar”；“Um Kalthoum”；“sid”；“12”、“家长”；“9”、“name_-ar”；“Zainab”；“13”、“家长”；“9”、“name_-ar”；“Ruqaya”；“sid”；“14”、“家长”；“9”、“家长”；“法图”；“家长”；“sid”；“家长”；“家长”；“家长”；“sid”；“家长”；“家长”；“家长”；“sid”；“家长”；“家长”；“家长”；“家长”；“易卜拉欣：{sid:“16”，“父母：{9”，“姓名”：“阿卜杜拉”}，{sid:“17”，“父母：{9”，“姓名”：“穆森”}，{sid:“18”，“父母：{5”，“姓名”：“阿里”}，{sid:“19”，“父母：”“18”，“姓名”：“哈桑”}，{sid:“20”，“父母：”：“18”，“姓名”；“侯赛因”；{sid:“21”，“父母”；“姓名”；“阿里·阿拉巴马”；“阿里”；“扎因”；“父母”；“拜登”；“穆罕默德”；{21”，“穆罕默德”，{“sid”：“23”，“父母”：“22”，“姓名”：“Jafar Sadeq”}，{“sid”：“24”，“父母”：“23”，“姓名”：“Mosa Kadim”}，{“sid”：“25”，“父母”：“24”，“姓名”：“Ali AlAreed”}，{“sid”：“26”，“父母”：“24”，“姓名”：“Ibrahim Murtada”}，{“sid”：“27”，“父母”：“26”，“姓名”：“Mosa（第二个）”}，{“sid”：“28”，“父母”：“27”，“姓名”：“Ahmed”；“父母”：“姓名”：“29”，“父母”：“姓名”：“sid”：“父母”：“姓名”：侯赛因{“sid”：“30”，“父母”：“29”，“姓名”；“阿布·阿尔卡西姆·穆罕默德”}，{“sid”：“31”，“父母”：“30”，“姓名”；“纳杰姆·阿尔丁·马赫迪”}；
//需要找到一种方法来动态设置“宽度”，因为树很深
var margin={顶部：25，右侧：120，底部：20，左侧：120}，
宽度=10000-margin.right-margin.left，
高度=5000-边距.顶部-边距.底部；
var i=0，
持续时间=750，
rectW=100，
rectH=30，
根；
//缩放功能
var zoom=d3.behavior.zoom（）
.scaleExtent（[1,10]）
。打开（“缩放”，缩放）；
var tree=d3.layout.tree（）
.nodeSize（[110，50]）；//增加到110以避免节点重叠
var diagonal=d3.svg.diagonal（）
.projection（函数（d）{return[d.x+rectW/2，d.y+rectH/2]；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.call（zoom）//添加到调用zoom以启用缩放；它可以工作：}
.on（“wheel.zoom”，null）//禁用鼠标滚轮滚动上的缩放
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//为节点创建基于名称的映射
//它从一个空对象开始，遍历数据数组，为每个节点添加一个条目
//对于平面阵列
var dataMap=data.reduce（函数（映射，节点）{
map[node.sid]=节点；
返回图；
}, {});
//迭代地将每个子级添加到其父级，如果找不到父级，则添加到根数组
//对于平面阵列
var treeData=[]；
data.forEach（函数（节点）{
//添加到父级
var parent=dataMap[node.parent]；
如果（家长）{
//如果子数组不存在，则创建它
（parent.children | |（parent.children=[]））
//将节点添加到子数组
.推送（节点）；
}否则{
//父项为null或缺少
树数据推送（节点）；
}
});
根=树数据[0]；
root.x0=高度/2；//垂直方向的宽度是否应为/2？
root.y0=0；
//使用在指定水平打开的深度进行测试
var节点=tree.nodes（根）；
功能折叠电平（d）{
console.log（“sid”+d.sid+“深度”+d.depth）；
如果（d.children&&d.depth>2）{//不工作，因为它在父深度处退出
d、 _children=d.children；
d、 _儿童。forEach（collapseLevel）；
d、 children=null；
}
}
root.children.forEach（collapseLevel）；//迭代每个节点并折叠，不包括节点零
更新（根）；
d3.选择（self.frameElement）.style（“高度”，“500px”）；
//缩放（拖动树！）
函数缩放（）{
attr（“transform”、“translate”（+d3.event.translate+））比例（+d3.event.scale+）；
}
函数更新（源）{
//计算新的树布局。
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
//为固定深度进行规格化。
forEach（函数（d）{d.y=d.depth*180；}）；
//更新节点…
var node=svg.selectAll（“g.node”）
.data（节点，函数（d）{返回d.id | |（d.id=++i）}）；
//在父节点的上一个位置输入任何新节点。
//摇动y0和x0的垂直树
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+source.x0+”，“+source.y0+”）”）；}）
.on（“单击”，单击）
.on（“鼠标悬停”，功能（d）{
var g=d3。选择（此）；//节点
var info=g.append（'text'）
.classed（'info'，true）
.attr（'x'，20）
.attr（'y'，10）
.text（函数（d）{返回d.name_ar+“”+d.sid}）；
})
.on（“mouseout”，函数（）{
//将鼠标移出时的信息文本删除。
d3.select（this）.select（'text.info'）.remove（）
});
;
//直肠结节
点头
function collapseLevel(d) {
    if (d.children && d.depth > 1) {
        d._children = d.children;
        d._children.forEach(collapseLevel);
        d.children = null;
    } else if (d.children) {
        d.children.forEach(collapseLevel);
    }
}