我想将根放在顶部并一次只显示一个级别的孩子。单击级别 1 children 后，应显示根和单击的子项及其子项。
下面是我尝试过的代码。我面临的问题是，当我单击 node1 时，我可以看到显示的节点 3，但是当我在节点 1 之后单击 node2 时，我只能看到节点 5 作为孩子，但看不到节点 4 和 5。谁能指出我要去的地方错误的
<html>
<head>
<style>
</style>
<script type="text/javascript" src="d3.v3.min.js?n=1"></script>
<script type="text/javascript" src="jquery-2.0.3.min.js?n=1"></script>
</head>
<body>
<svg width="400px" height="800px" xmlns="http://www.w3.org/2000/svg" version="1.1" id="tran">
<desc>Example NewCoordSys - New user coordinate system</desc>
<g class="root">
<g fill="none" stroke="black" stroke-width="3">
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>
<g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
Level root
</text>
</g>
</g>
<!-- Establish a new coordinate system, which is
shifted (i.e., translated) from the initial coordinate
system by 50 user units along each axis. -->
<g transform="translate(0,200)" class="level1">
<g fill="none" stroke="red" stroke-width="3" >
<!-- Draw lines of length 50 user units along
the axes of the new coordinate system -->
<line x1="0" y1="0" x2="400" y2="0" stroke="red" />
<line x1="0" y1="0" x2="0" y2="300" />
</g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
Level 1
</text>
</g>
<g transform="translate(0,500)" class="level2">
<g fill="none" stroke="blue" stroke-width="3" >
<!-- Draw lines of length 50 user units along
the axes of the new coordinate system -->
<line x1="0" y1="0" x2="400" y2="0" stroke="blue" />
<line x1="0" y1="0" x2="0" y2="250" />
</g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
Level 2
</text>
</g>
</svg>
<script>
nodes = [ {"id":0, "start":10 , "stop":100, "total":90, "prev":[], "next":[1,2]},
{"id":1, "start":30 , "stop":50, "total":20, "prev":[0], "next":[3]},
{"id":2, "start":60 , "stop":80, "total":20, "prev":[0], "next":[4,5]},
{"id":3, "start":90 , "stop":110, "total":20, "prev":[1], "next":[]},
{"id":4, "start":120 , "stop":150, "total":30, "prev":[2], "next":[]},
{"id":5, "start":160 , "stop":190, "total":30, "prev":[2], "next":[6]},
{"id":6, "start":100 , "stop":130, "total":30, "prev":[5], "next":[]}]
start_pos = 50;
init();
function init(){
data_val = [];
data_val.push(nodes[0]);
svg = d3.select(".root")
svg.selectAll("rect")
.data(data_val)
.enter()
.append("svg:rect")
.attr("class","conodes_root")
.attr("width",function(d){ return d.total;})
.attr("height","30")
.attr("x",function(d){ return d.start;})
.attr("y",start_pos)
.style("fill","blue")
.style("opacity","0.5")
.on("click",function(d){
if(d.next.length != 0){
start_pos = 100;
child(d.next, start_pos);
}
});
svg.append("svg:g")
.selectAll("text")
.data(data_val)
.enter()
.append("svg:text")
.attr("class","conodes_root")
.attr("x",function(d){ return d.total/2;})
.attr("y",70)
.text(function(d){ return d.id + " " + " (" + d.next.length + " ) "; });
}
function child(child_arr, start_pos){
console.log(child_arr);
child_arr_nodes = [];
child_arr.forEach(function(d){
child_arr_nodes.push(nodes[d]);
})
console.log(child_arr_nodes);
svg_l1 = d3.select(".level1")
svg_l1.selectAll("rect")
.data(child_arr_nodes)
.enter()
.append("svg:rect")
.attr("class","conodes_child")
.attr("width",function(d){
console.log(d);
return d.total;})
.attr("height","30")
.attr("x",function(d){ return d.start;})
.attr("y",start_pos)
.style("fill","blue")
.style("opacity","0.5")
.on("click",function(d){
//if(d.next.length != 0){
start_pos = 150
child_l2(d.next, start_pos);
//}
})
/*svg_l1.append("svg:g")
.selectAll("text")
.data(child_arr_nodes)
.enter()
.append("svg:text")
.attr("class","conodes_child")
.attr("x",function(d){ return d.total/2;})
.attr("y",start_pos)
.text(function(d){ return d.id + " " + " (" + d.next.length + " ) "; });*/
}
function child_l2(child_arr, start_pos){
console.log(child_arr);
child_arr_nodes = [];
child_arr.forEach(function(d){
child_arr_nodes.push(nodes[d]);
})
console.log(child_arr_nodes);
svg_l2 = d3.select(".level2")
svg_l2.selectAll("rect")
.data(child_arr_nodes)
.enter()
.append("svg:rect")
.attr("class", function(d){ return "child" + d.id;})
.attr("width",function(d){
console.log(d);
return d.total;})
.attr("height","30")
.attr("x",function(d){ return d.start;})
.attr("y",start_pos)
.style("fill","blue")
.style("opacity","0.5")
/*.on("click",function(d){
//if(d.next.length != 0){
start_pos = 150
child_l2(d.next, start_pos);
//}
})*/
/*svg_l1.append("svg:g")
.selectAll("text")
.data(child_arr_nodes)
.enter()
.append("svg:text")
.attr("class","conodes_child")
.attr("x",function(d){ return d.total/2;})
.attr("y",start_pos)
.text(function(d){ return d.id + " " + " (" + d.next.length + " ) "; });*/
}
</script>
</body>
</html>