JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset="UTF-8">
<!-- load the d3.js library -->	
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3plus.org/js/d3plus-text.v0.10.full.min.js"></script>
  <script>
		const circleSize = 8
		
		// Set the dimensions and margins of the diagram
		var margin = {top: 20, right: 90, bottom: 30, left: 90},
			width = 900	- margin.left - margin.right,
			height = 900 - margin.top - margin.bottom;
			
		// declares a tree layout and assigns the size
		var treemap = d3.tree().size([height, width]);
		
		// load the external data
		var flatData = [
			{"name": "This is a very long name for the top level", "parent": null},
			{"name": "This is a very long name for Level 2A", "parent": "This is a very long name for the top level" },
			{"name": "This is a very long name for Level 2B", "parent": "This is a very long name for the top level" },
			{"name": "This is a very long name for Son of A", "parent": "This is a very long name for Level 2A" },
			{"name": "This is a very long name for Daughter of A", "parent": "This is a very long name for Level 2A" }
			];
			
			
			// assign null correctly
			flatData.forEach(function(d) {
				if (d.parent == "null") { d.parent = null};
				});	
				
			// convert the flat data into a hierarchy
			var treeData = d3.stratify()
				.id(function(d) { return d.name; })
				.parentId(function(d) { return d.parent; })
				(flatData);
			
			
			// assign the name to each node
			treeData.each(function(d) {
			d.name = d.data.name;
			});	
			
			// append the svg object to the body of the page
			// appends a 'group' element to 'svg'
			// moves the 'group' element to the top left margin
			var svg = d3.select("body").append("svg")
				.attr("width", width + margin.right + margin.left)
				.attr("height", height + margin.top + margin.bottom)
				.append("g")
				.attr("transform", "translate("
					  + margin.left + "," + margin.top + ")");

			var i = 0,
			duration =...

CSS

<style>
	.node circle {
	  fill: #FFF;
	  stroke: #009BE4;
	  stroke-width: 2px;
	}
	.node text {
	  font: 12px sans-serif;
	}
	.link {
	  fill: none;
	  stroke: #555;
	  stroke-width: 2px;
	  stroke-opacity: 0.3;
	}
</style>