Ron D. Ron D. - 1 year ago 320
Javascript Question

d3.js: Expand multiple paths in tree layout

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.
enter image description here

Answer Source

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

	function searchTree(obj,search,path, paths){
		if( != -1){ //if search is found return, add the object to the path and return it
			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);


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download