d3缩进树关闭具有子节点的其他节点并仅打开特定节点

时间:2015-06-05 05:19:03

标签: javascript php d3.js tree

您好我将使用此jsfiddle作为参考http://jsfiddle.net/Ge58Q/16/

@"//td//img"

你可以看到我有一个有多个分支的树。我想要做的是onload我只希望NODE LIGHTNING让孩子打开,这就是NODE TURBO。 NODES CUTE AND NODE TOXIC我希望他们的孩子被隐藏起来。这可能只打开我想要的特定节点吗?????????

我认为这与上面的代码

有关

1 个答案:

答案 0 :(得分:1)

如果您希望使用特定名称将路径从根扩展到节点,则可以使用某种算法来获取路径,例如深度优先使用堆栈存储路径。下面是函数示例,它封装递归函数并返回从根到节点的索引为children的数组:

function getPathToNode(val, rootNode) {
    var stack = [];
    var nodeFound = false;
    function getPathRec(node) {
        if (nodeFound) {
            return;
        }
        if (node._children || node.children) {
            var nodeChildren = node.children ? node.children : node._children;
            for (var i=0; i<nodeChildren.length; i++) {
                if (!nodeFound) {
                    stack.push(i);
                    getPathRec(nodeChildren[i]);
                }
            }
        }
        if  (node.name == val && !nodeFound) {
            nodeFound = true;
            return;
        } else if (!nodeFound) {
            stack.pop();
        }
    }
    getPathRec(rootNode);
    return stack;
}

然后你可以扩展路径上的节点:

function expandToNode(val) {
    path = getPathToNode(val, flare);
    currentNode = flare;
    for (var i=0; i<path.length - 1; i++) {
        currentNode = currentNode.children[path[i]];
        expandSingle(currentNode);
    }
}

因此,只需将节点名称为expandToNodes(val)的函数val parameter调用:

expandToNode('turbo');

这是有效的JSFiddle:http://jsfiddle.net/Ge58Q/18/

限制:如果有多个节点具有确切的名称,则它仅扩展第一个找到的节点。如果要扩展所有路径,可以遍历整个根并返回所有路径。我只使用您的树数据测试了代码,因此可能存在一些错误。