我目前正在使用Treant.js可视化决策树(我没有足够的声誉来创建标签)。它应该像问卷一样工作,所以当我单击一个节点时,所有子节点都应折叠。 到目前为止,该方法一直有效,以至于子节点可以折叠,但是单击的节点无法打开
在Treant.js中,单击可折叠节点时可以创建使用回调的方法。我使用了json方法来定义树。
var click_collapse = true;
simple_chart_config = {
chart: {
container: "#variant",
callback: {
onBeforeClickCollapseSwitch: function (answer) {
var parent = answer.parentElement;
if(!click_collapse)
{
click_collapse = true;
return;
}
if(parent.classList.contains("collapsed")) {
var answerclass = parent.classList[2]
var siblings =
document.getElementsByClassName(answerclass);
for(let s of siblings){
if(!s.classList.contains("collapsed") && s != parent)
{
for(let c of s.childNodes){
if(c.classList.contains("collapse-switch")){
click_collapse = false;
c.click();
}
}
}
}
}
}
},
},
connectors: {
type: 'step'
},
nodeStructure: {
text: { name: "Q1"},
HTMLid: "q1",
connectors: {type: "step"},
HTMLclass: "question",
children: [
{
text: { name: "Q1 A1" },
collapsed: true,
HTMLid: "v1",
HTMLclass: "answer contractType",
children: [
{
text: {name: "Q2"},
HTMLid: "q2",
HTMLclass: "question",
connectors: {type: "step"},
children:[
{
text: {name: "Q2 A1"},
collapsed: true,
HTMLid: "g1",
HTMLclass: "answer sib-companyType",
children: [
{
text: {name: "Q3"},
HTMLclass: "question",
HTMLid: "q3",
connectors: {type: "step"},
children: [
{
text: {name: "Q3 A1"},
collapsed: true,
},
{
text: {name: "Q3 A1"},
collapsed: true,
}
]
}
]
},
{
text: {name: "Q2 A2"},
collapsed: true,
HTMLid: "g2",
HTMLclass: "answer sib-companyType",
...
我想实现的是当一个节点,例如显示“ Q2 A1”,然后单击“ Q2 A1”将折叠“ Q2 A1”,并显示“ Q2 A2”及其子项。