在 D3 中搜索元素 - 强制布局或树

Question

是否有在 d3js 布局（强制定向或树）中搜索元素并突出显示该元素的示例？

我认为会有一个文本字段，用户可以在其中输入值进行搜索。

Answer 1

我编写了一个带有基于 select2 的搜索小部件的解决方案。
您会找到以红色样式展开的路径的节点。
对树进行了充分探索，可以找到多个答案。

可折叠树搜索
https://gist.github.com/PBrockmann/0f22818096428b12ea23

希望对你有所帮助
帕特里克

Answer 2

这是我制作的gist，也许相关？

我将我的实现分为 3 个步骤：

1) 在 select2 框中选择叶节点名称时，searchTree。

$("#search").on("select2-selecting", function(e) {
    var paths = searchTree(root,e.object.text,[]);
    if(typeof(paths) !== "undefined"){
        openPaths(paths);
    }
    else{
        alert(e.object.text+" not found!");
    }
})

2) searchTree 返回一个节点数组，按照距离根节点（路径）的距离排列

function searchTree(obj,search,path){
    if(obj.name === search){ //if search is found return, add the object to the path and return it
        path.push(obj);
        return path;
    }
    else if(obj.children || obj._children){ //if children are collapsed d3 object will have them instantiated as _children
       var children = (obj.children) ? obj.children : obj._children;
       for(var i=0;i<children.length;i++){
            path.push(obj);// we assume this path is the right one
            var found = searchTree(children[i],search,path);
            if(found){// we were right, this should return the bubbled-up path from the first if statement
                return found;
            }
            else{//we were wrong, remove this parent from the path and continue iterating
                path.pop();
            }
        }
    }
    else{//not the right object, return false so it will continue to iterate in the loop
        return false;
    }
}

3) 通过将“._children”替换为“.children”来打开路径，并添加“found”类以将所有内容涂成红色。 （参见链接和节点实例）

function openPaths(paths){
    for(var i=0;i<paths.length;i++){
        if(paths[i].id !== "1"){//i.e. not root
            paths[i].class = 'found';
            if(paths[i]._children){ //if children are hidden: open them, otherwise: don't do anything
                paths[i].children = paths[i]._children;
                paths[i]._children = null;
            }
            update(paths[i]);
        }
     }
}

我意识到这可能不是最好的方法，但是嘿，完成工作:)

Answer 3

我写了一个工具，允许浏览生物regulatory networks，并排显示两个 SVG 面板。每个面板都包含转录因子（节点）的强制布局网络，由 d3.js API 绘制。您可以输入转录因子的名称，它会使用与mouseover 事件发生时相同的代码突出显示它。探索代码可能会让您深入了解它是如何完成的。

Answer 4

你不是要 d3.selectAll 吗？

https://github.com/mbostock/d3/wiki/Selections#wiki-d3_selectAll

1. 使用带有搜索按钮的文本字段。
2. 将搜索转换为节点中的 D3/CSS3 选择器。
3. d3.selectAll
4. 将新样式应用于匹配/不进行查询的节点。