JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>
<div id="tree_container"></div>

CSS

.node {
  cursor: pointer;
}

.node circle {
  fill: #fff;
  stroke: #C0C0C0;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #C0C0C0;
  stroke-width: 1.5px;
}

#tree_container {
  	width: 300px;
	height: 300px;
}

JavaScript

var treeData = [{
  "name": "Tree",
  "children": [{
    "name": "Parent",  "children": [
  {
    "name": "2"
  },
  {
    "name": "3"
  },
  {
    "name": "4"
  },
  {
    "name": "5"
  },
  {
    "name": "6"
  },
  {
    "name": "7"
  },
  {
    "name": "8"
  },
  {
    "name": "9"
  },
  {
    "name": "10"
  },
  {
    "name": "21"
  },
  {
    "name": "22"
  },
  {
    "name": "23" 
  },
  {
    "name": "24"
  },
  {
    "name": "25"
  },
  {
    "name": "26"
  },
  {
    "name": "27"
  },
  {
    "name": "28"
  },
  {
    "name": "29"
  },
  {
    "name": "30"
  },{
    "name": "31"
  },
  {
    "name": "32"
  },
  {
    "name": "33"
  },
  {
    "name": "34"
  },
  {
    "name": "35"
  },
  {
    "name": "36"
  },
  {
    "name": "37"
  },
  {
    "name": "38"
  },
  {
    "name": "39"
  },
  {
    "name": "40"
  }],
  }]
}];



initMapping();



function initMapping() {

			//===============================================
			function select2DataCollectName( d ) {
				if ( d.children )
					d.children.forEach( select2DataCollectName );
				else if ( d._children )
					d._children.forEach( select2DataCollectName );
				if ( !d.children && d.type == 'learning_event' ) select2Data.push( d.name );
			}

			//===============================================
			function searchTree( d ) {
				if ( d.children )
					d.children.forEach( searchTree );
				else if ( d._children )
					d._children.forEach( searchTree );
				var searchFieldValue = eval( searchField );
				if ( searchFieldValue && searchFieldValue.match( searchText ) ) {
					// Walk parent chain
					var ancestors = [];
					var parent = d;
					while ( typeof ( parent ) !== "undefined" ) {
						ancestors.push( parent );
						//console.log(parent);
						parent.class = "found";
						parent = parent.parent;
					}
					//console.log(ancestors);
				}
			}
			//===============================================
			function clearAll( d ) {
				d.class = "";
				if ( d.children )
					d.children.forEach(...