JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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": "1", 
  },
  {
    "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", 
  },{
    "name": "51", 
  },
  {
    "name": "52", 
  },
  {
    "name": "53", 
  },
  {
    "name": "54", 
  },
  {
    "name": "55", 
  },
  {
    "name": "56", 
  },
  {
    "name": "57", 
  },
  {
    "name": "58", 
  },
  {
    "name": "59", 
  },
  {
    "name": "60", 
  },]
}];



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" )...