D3.js可折叠树 - 展开/折叠中间节点 [英] D3.js collapsible tree - expand/collapse intermediate nodes
问题描述
我有一个D3.js 可折叠树里面有一堆的节点。有在树几个路径中存在只有一个子节点的序列。想象一下这棵树：
5
/
1 - 2 - 3 - 4 -6
\\
7
当点击 1 节点，我希望它变成：
5
/
1 - 4 -6
\\
7
现在我的code的扩展和正常折叠节点。我该如何选择那些的中级的节点，所以我可以用我的切换功能，他们的目标，因为我现在怎么办？
我的code是基本相同的例子中，除了一些东西，我补充说，不涉及这个问题。在切换（）函数接收一个指针节点，使可见子节点（在孩子数组）无形的（通过移动它们 _children 数组）。这打的所有的孩子（和孙子和曾孙，...），以特定的节点，但我需要它继续，同时它找到与节点的究竟的1孩子，那么，如果它发现没有孩子的节点，我希望它是可见的;如果节点已经超过100的孩子，我希望它从该点所有旅客的需求。
这是切换（）函数code，它在一个节点的onclick名为：
切换功能（D）{
VAR myLength;
如果（d.children）{myLength = d.children.length;}
其他{myLength = 0;} 如果（myLength === 1）{
//接下来将是我们与一个以上的孩子找到的第一个节点
变种下一= d.children [0];
为（;;）{如果（next.hasOwnProperty（'孩子'））{
如果（next.children.length === 1）{
下一= next.children [0];
}否则如果（next.children.length→1）{
打破;
}
}其他{
//你有没有孩子处理节点
打破;
}
}
d._children = d.children;
d.children = [下一页];
}其他{
如果（d.children）{
d._children = d.children;
d.children = NULL;
}其他{
d.children = d._children;
d._children = NULL;
}
}
}
这是切换功能并不做任何形式的逻辑检查的，它只是删除，并增加了孩子。要做到你想要什么，你需要使用位逻辑和数据遍历的，但它不是不可能的。尝试是这样的：
切换功能（D）{
如果（d.children.length === 1）{
//接下来将是我们与一个以上的孩子找到的第一个节点
变种下一= d.children [0];
为（;;）{
如果（next.children.length === 1）{
下一= next.children [0];
}否则如果（next.children.length→1）{
打破;
}其他{
//你有没有孩子处理节点
}
} d._children = d.children;
d.children = [下一页];
}
}
I have a D3.js collapsible tree which has a bunch of nodes. There are a few paths in the tree in which there sequences of nodes with only one child. Imagine this tree:
5
/
1 - 2 - 3 - 4 -6
\
7
When the 1 node is clicked, I want it to become:
5
/
1 - 4 -6
\
7
Right now my code expands and collapses nodes normally. How can I select those intermediate nodes so I can target them with my toggle function as I do right now?
My code is basically the same as in the example, except for some stuff I added that isn't related to this question. The toggle() function receives a pointer to a node and makes the visible child nodes (in the children array) invisible (by moving them to them _children array). This hits all the children (and grandchildren, and great-grandchildren,...) to that specific node, but I need it to continue while it finds nodes with exactly 1 child, then, if it finds a node that has no children, I want it to be visible; if the node has more than 1 child, I want it to show all of them from that point on.
This is the toggle() function code that is called onclick in one of the nodes:
function toggle(d) {
var myLength;
if(d.children){myLength = d.children.length;}
else{myLength=0;}
if (myLength === 1) {
//next will be the first node we find with more than one child
var next = d.children[0];
for (;;) {if(next.hasOwnProperty('children')){
if (next.children.length === 1) {
next = next.children[0];
} else if (next.children.length > 1) {
break;
}
} else {
// you'll have to handle nodes with no children
break;
}
}
d._children = d.children;
d.children = [next];
}else{
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
}
}
That toggle function doesn't do any sort of logic checking, it simply removes and adds the children. To do what you want, you'll need to use a bit of logic and data traversing, but it's not impossible. Try something like this:
function toggle(d) {
if (d.children.length === 1) {
//next will be the first node we find with more than one child
var next = d.children[0];
for (;;) {
if (next.children.length === 1) {
next = next.children[0];
} else if (next.children.length > 1) {
break;
} else {
//you'll have to handle nodes with no children
}
}
d._children = d.children;
d.children = [next];
}
}
这篇关于D3.js可折叠树 - 展开/折叠中间节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
