d3.js:在树形布局中扩展多个路径 [英] d3.js: Expand multiple paths in tree layout

问题描述

我的JSON在不同的路径中包含相同的节点名称，我希望能够打开所有具有相同名称的子代或名称中包含子字符串的子代.

尝试了以下示例:[搜索可折叠树]，但它仅打开了一条路径.
这个想法是实现对子字符串的搜索，如果路径的节点包含搜索项，则打开(扩展)该路径.

因此，我将Select2替换为文本输入，但是搜索仍然仅限于一个结果.

My JSON contains same node names in different paths, I would like to be able to open all children with the same name or has substring in their names.

Tried this example: [Search Collapsible Tree], but it opens only one path.
The idea is to implement search for substring and a if a path has a node that contains the search term, then, open (expand) that path.

So, I replaced the Select2 to text input but the search is still limited to one result.

推荐答案

您只需要更改树搜索功能以找到所有节点(然后突出显示所有内容)即可:

You just need to change tree search function to find all the nodes (and then, highlight everything):

	function searchTree(obj,search,path, paths){
		if(obj.name.indexOf(search) != -1){ //if search is found return, add the object to the path and return it
			path.push(obj);
			paths.push(path.slice(0)); // clone array
		}
		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			  
				searchTree(children[i],search,path, paths);
				path.pop();
			}
		}
	}

...

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

这篇关于d3.js:在树形布局中扩展多个路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！