JSFiddle - React, Tailwind, and code Playground

by Nivaldo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
Search Node: <input type="text" value="" id="search" />
<div id="graph"></div>

CSS

.node {
  stroke: #009900;
  stroke-width: 1.5px;
  color: #009900;
}
.node text {
  pointer-events: none;
  font: 15px sans-serif;
  stroke-width: 0px;
}
.link {
  stroke: #999;
  /* stroke-opacity: 2.6; */
} 
path.link {
  fill: none;
  stroke-width: 2px;
} 
marker#end {
  fill: #999;
}
line {
  stroke: #000;
  stroke-width: 1.5px;
}

JavaScript

function myGraph(el) {

    // Add and remove elements on the graph object
    this.addNode = function (id,name) {
        nodes.push({"id":id,"name":name,"group":id});
        update();
    }

    this.removeNode = function (id) {
        var i = 0;
        var n = findNode(id);
        while (i < links.length) {
            if ((links[i]['source'] === n)||(links[i]['target'] == n)) links.splice(i,1);
            else i++;
        }
        var index = findNodeIndex(id);
        if(index !== undefined) {
            nodes.splice(index, 1);
            update();
        }
    }

    this.addLink = function (sourceId, targetId) {
        var sourceNode = findNode(sourceId);
        var targetNode = findNode(targetId);

        if((sourceNode !== undefined) && (targetNode !== undefined)) {
            links.push({"source": sourceNode, "target": targetNode});
            update();
        }
    }
    
    this.searchNode = function (id) {
        var searchedNode = findNode(id);
        if(searchedNode == null){
            //alert("Not Found");
        	return false;
        }else {
        	//alert("Found");
            d3.selectAll("#id_" + id)
                .transition().duration(350)
                .attr("r",20)
                .transition().duration(350)
                .attr("r",8);
        	upd(searchedNode);
        }	
    }

    var findNode = function (id) {
        for (var i=0; i < nodes.length; i++) {
            if (nodes[i].id === id)
                return nodes[i]
        };
    }

    var findNodeIndex = function (id) {
        for (var i=0; i < nodes.length; i++) {
            if (nodes[i].id === id)
                return i
        };
    }

	var width = 500,
		height = 300;
	var w = 960,
		h = 500;

	var color = d3.scale.category20();

	var force = d3.layout.force()
		.gravity(.05)
		.charge(-120)
		.linkDistance(30)
		.size([width, height]);

	var svg = d3.select("#graph").append("svg")
		.attr("width", width)
		.attr("height", height);

  ...