JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
			<div id="mainScreen" style="height:100%;width:100%;position:absolute;" >
				<svg id="diagramLayout" style="height:100%;width:100%;position:absolute;">
				</svg>

			</div>

CSS

.node {
			stroke: #fff;
			stroke-width: 1.5px;
		}
		
		.link {
			stroke: #000;
			stroke-opacity: .6;
		}

JavaScript

var width = 500;
			var height = 500;
			var nodeWidth = 40;
			var nodeHeight = 40;
			var circleRadius = 5;
			var diagramLayout;
			var graphData = {"nodes":[{"uid":"Term20","name":"Term20","image":"images/Term.png"},{"uid":"glossforArrow","name":"glossforArrow","image":"images/Glossary.png"},{"uid":"Term43","name":"Term43","image":"images/Term.png"},{"uid":"Term1","name":"Term43","image":"images/Term.png"},{"uid":"Term2","name":"Term43","image":"images/Term.png"}],"links":[{"source":"glossforArrow","target":"Term20","direction":"output","label":"Owned Terms"},{"source":"glossforArrow","target":"Term43","direction":"output","label":"Owned Terms"},{"source":"glossforArrow","target":"Term1","direction":"output","label":"Owned Terms"},{"source":"glossforArrow","target":"Term2","direction":"output","label":"Owned Terms"}]};

			forceInitialize(graphData)
				
				
				function forceInitialize(graphData){
					
					diagramLayout = d3.select("#diagramLayout")
						.attr("id", "diagramLayout")//set id
						.attr("width", width)//set width
						.attr("height", height)//set height
						.append("g")
						.attr("transform", "translate(" + 20 + "," + 20 + ")")	
				
					markerRefx = 35;

					simulation = d3.forceSimulation();
					alphaMulti = 1;
					simulation.force("link", d3.forceLink().id(function(d) { return d.uid; }).distance(70).strength(0))
									.force("charge", d3.forceManyBody().distanceMin(20).distanceMax(50))
									.force("centre", d3.forceCenter(width/2 , height/2))
									.force("x", d3.forceX(2))
									.force("y", d3.forceY(10)) 
									.force("collide", d3.forceCollide().radius(function(d) { return 80; }).iterations(2))
					simulation.on('end', function() { 
						simulation.force("link", d3.forceLink().id(function(d) { return d.uid; }).distance(30).strength(0.0).iterations(10))
						.force("x", d3.forceX().strength(0))
						.force("y", d3.forceX().strength(0))
				  ...