Javascript 以编程方式打开d3.js v4中的嵌套、折叠（隐藏）节点

我试图以编程方式打开可折叠树中的d3.js节点：

我使用下面的d3.js代码段加载数据（它在第二级之后折叠节点）

d3.json（“js/ontology.json”），函数（错误，treeData）{
如果（错误）抛出错误；
root=d3.hierarchy（treeData，函数（d）{返回d.children；}）；
root.x0=高度/2；
root.y0=0；
//在第二层之后崩溃：
根。子。forEach（塌陷）；
更新（根）；
});

然后我使用下面的d3.js代码

var nodeEnter=node.enter（）.append（'g'）
.attr（'类'，'节点'）
.attr（'node-name'，d=>d.data.name.toLowerCase（））
.attr（“转换”，函数（d）{
返回“translate”（“+source.y0+”，“+source.x0+”）；
})
.on（'点击'，点击）；

这个函数呢

函数expandNode（）{
const node=d3.select（'.node[node name=“Nature”]'）.node（）；
log（'NODE:'，NODE）；
node.dispatchEvent（新事件（'click'））；
}
expandNode（）；

以编程方式打开“Nature”节点

然而，当我将“自然”（可见节点）替换为“地球”（嵌套的“自然”子节点，不可见）时，这个表达式

const node=d3.选择（'.node[node name=“Earth”]'）.node（）；

仅当“地球”节点可见时，才会展开该节点

如果“地球”不可见，该声明将不会扩展“自然”来显示“地球”（并随后扩展“地球”）

建议

---

编辑1。这与我之前的StackOverflow问题密切相关

如果需要，请参考此处引用的JSFIDLE

标签不同，但数据和代码相似

---

编辑2。后续问题

关于：

• d3.jsv6
• 通过d3.js回调/承诺加载外部JSON数据
• 这个问题，在这个更新的背景下

---

ontology.json

{“name”：“Root”，
“儿童”：[
{“名称”：“文化”，
“儿童”：[
{“姓名”：“LGBT”}
]
},
{“名称”：“自然”，
“id”：“自然”，
“儿童”：[
{“名称”：“地球”，
“id”：“地球”，
“儿童”：[
{“名称”：“环境”}，
{“名称”：“地理”}，
{“名称”：“地质学”}，
{“名称”：“地缘政治”}，
{“名称”：“地缘政治国家”}，
{“名称”：“地缘政治-国家-加拿大”}，
{“名称”：“地缘政治-国家-美国”}，
{“名称”：“自然”}，
{“名称”：“区域”}
]
},
{“名称”：“宇宙”}，
{“名称”：“外层空间”}
]
},
{“姓名”：“人文学科”，
“儿童”：[
{“名称”：“历史”}，
{“名称”：“哲学”}，
{“名称”：“哲学-神学”}
]
},
{“名称”：“杂项”，
“儿童”：[
{“名称”：“维基百科”，
“url”：”https://wikipedia.com" },
{“name”：“Example.com”，
“url”：”https://example.com" }
]
},
{“名称”：“科学”，
“儿童”：[
{“名称”：“生物学”}，
{“名称”：“健康”}，
{“名称”：“健康-医学”}，
{“名称”：“社会学”}
]
},
{“名称”：“技术”，
“儿童”：[
{“名称”：“计算机”}，
{“名称”：“计算机-硬件”}，
{“名称”：“计算机-软件”}，
{“名称”：“计算”}，
{“名称”：“计算-编程”}，
{“名称”：“互联网”}，
{“名称”：“空格”}，
{“名称”：“运输”}
]
},
{“姓名”：“社会”，
“儿童”：[
{“名称”：“业务”}，
{“名称”：“经济学”}，
{“名称”：“经济-商业”}，
{“名称”：“经济-资本主义”}，
{“名称”：“经济-商业”}，
{“名称”：“经济-金融”}，
{“名称”：“政治”}，
{“名称”：“公共服务”}
]
}
]
}

您需要递归地发现节点祖先，然后将它们展开一个：

const findNodeOrients=（根，名称）=>{
if（root.name==name）{
返回[名称]；
}
if（root.children）{
for（设i=0；i=0；i--）{
const node=d3.select（`.node[node name=“${chain[i]}”]`）；
const nodeData=node.datum（）；
如果（！nodeData.children&&nodeData.data.children）{//节点有子节点并已折叠
node.node（）.dispatchEvent（新建事件（'click'）；//展开节点
}
}

---

看到它在a中工作。

你能把你的

ontology.json

文件贴在这里吗？@VictoriaStuart Hi:）我意识到我们这里有多个问题，所以也许最好把问题分成不同的问题，一个一个地解决。所以我建议把原来的问题保留在这里，把后续的问题转移到一个新的问题上；非常感谢。：-）