d3 tree - Highlight output path

Nayana Das

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<input type="text" id="newpath" value="outlook,overcast,cool,normal,true" style="width:300px;font-size: 18px;"/>&nbsp;&nbsp;
<button type="button" id="btnsearchPath" style="font-size: 18px;">Find output path</button>
<br><br><br>
<div id="search"></div>

CSS

.node {
		cursor: pointer;
	}

	.node circle {
		fill: #a53a17;
		stroke: steelblue;
		stroke-width: 1.5px;
	}

	.found {
		fill: #ff4136;
		stroke: #ff4136;
	}
	.node text {
		font: 10px sans-serif;
	}

	.link {
		fill: none;
		stroke: #ccc;
		stroke-width: 1.5px;
	}
	/*Just to ensure the select2 box is "glued" to the top*/
	.search {
	  width: 100%;
	}

JavaScript

var treejson2 = {"name":"outlook","children":[{"name":"sunny","children":[{"name":"hot","children":[{"name":"high","children":[{"name":"false","children":[{"name":"no"}]},{"name":"true","children":[{"name":"no"}]}]}]},{"name":"mild","children":[{"name":"high","children":[{"name":"false","children":[{"name":"no"}]}]}]}]},{"name":"rainy","children":[{"name":"mild","children":[{"name":"high","children":[{"name":"false","children":[{"name":"yes"}]}]}]},{"name":"cool","children":[{"name":"normal","children":[{"name":"false","children":[{"name":"yes"}]},{"name":"true","children":[{"name":"no"}]}]}]}]},{"name":"overcast","children":[{"name":"hot","children":[{"name":"high","children":[{"name":"false","children":[{"name":"yes"}]}]}]},{"name":"cool","children":[{"name":"normal","children":[{"name":"true","children":[{"name":"yes"}]}]}]}]}]};

	var fullpath =[];


	function verticletreecollapse(d, text) {
		//console.log(d)
		if(typeof text=="string"){
			//console.log("text : "+text)
			//if (d.children) {
       	 		//d._children = d.children;
       	 		if(d.name==text){
       	 		console.log("equal to text : "+text)
       	 			fullpath.push(d);
       	 		}
        		d.forEach(verticletreecollapse);
       			 d.children = null;
    		//}
    		//return fullpath;
		}
    	
	}

	

	//basically a way to get the path to an object
	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);
			//fullpath.push(path)
			//console.log(fullpath);
			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...