是否有在 d3js 布局(强制定向或树)中搜索元素并突出显示该元素的示例?
我在想会有一个文本字段,用户可以在其中输入要搜索的值。
是否有在 d3js 布局(强制定向或树)中搜索元素并突出显示该元素的示例?
我在想会有一个文本字段,用户可以在其中输入要搜索的值。
我写了一个工具,允许浏览生物监管网络,并排显示两个 SVG 面板。每个面板都包含一个转录因子(节点)的强制布局网络,由 d3.js API 绘制。mouseover
您可以输入转录因子的名称,它会使用与事件发生时相同的代码突出显示它。探索代码可能会让您深入了解它是如何完成的。
这是我提出的要点,也许相关?
我将我的实现分为三个步骤:
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]);
}
}
}
我意识到这可能不是最好的方法,但是嘿,完成工作:)
我已经使用基于 select2 的搜索小部件编写了一个解决方案。
您会找到以红色样式展开的路径的节点。
树已被充分探索,可以找到多个答案。
可折叠树搜索
https://gist.github.com/PBrockmann/0f22818096428b12ea23
希望这会帮助
帕特里克
您不是要 d3.selectAll 吗?
https://github.com/mbostock/d3/wiki/Selections#wiki-d3_selectAll