JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

CSS

html{ width: 100%; height: 100%; }
body{
  width: 100%;
  height: 100%;
  margin: 0; padding: 0;
  display: flex;
  font-family: sans-serif; font-size: 75%; }

/* SVG styles */
svg { flex-basis: 100%; }

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

JavaScript

var nodes = [
	{
		"id" : "1",
		"fx" : "225",
		"fy" : "225"
	},
	{
		"id" : "2"
	},
	{
		"id" : "3"
	},
	{
		"id" : "4"
	},
	{
		"id" : "5"
	},
	{
		"id" : "6"
	},
	{
		"id" : "7"
	},
	{
		"id" : "8"
	},
	{
		"id" : "9"
	},
	{
		"id" : "10",
		"x" : "125",
		"y" : "125"	
	},
	{
		"id" : "11"
	},
	{
		"id" : "12"
	},
	{
		"id" : "13"
	},
	{
		"id" : "14"
	},
	{
		"id" : "15"
	}
]

var links = 
[
	{
		"source" : 1,
		"target" : 2
	},
	{
		"source" : 1,
		"target" : 3
	},
	{
		"source" : 1,
		"target" : 4
	},
	{
		"source" : 1,
		"target" : 5
	},
	{
		"source" : 1,
		"target" : 6
	},
	{
		"source" : 1,
		"target" : 7
	},
	{
		"source" : 1,
		"target" : 8
	},
	{
		"source" : 1,
		"target" : 9
	},
	{
		"source" : 1,
		"target" : 10
	},
	{
		"source" : 10,
		"target" : 11
	},
	{
		"source" : 10,
		"target" : 12
	},
	{
		"source" : 10,
		"target" : 13
	},
	{
		"source" : 10,
		"target" : 14
	},
	{
		"source" : 10,
		"target" : 15
	}
]


var svg = d3.select("svg")

    var zoom = d3.zoom()
        .on("zoom", zoomed);
        //.scaleExtent([1 / 8, 4])

        svg
            .call(zoom).on("dblclick.zoom", null)


var g = svg.append("g");

function zoomed() {
  g.attr("transform", d3.event.transform);
}

var color = d3.scaleOrdinal(d3.schemeCategory20);



var simulation = d3.forceSimulation()
	//.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(function(d) {return d.distance/2;}).strength(1))
  .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(10).strength(1))
  .force("charge", d3.forceManyBody().strength(-10).distanceMax(100));
  //.force("center", d3.forceCenter(1000, 1000));
  //.force("y", d3.forceY(500))
  //.force("x", d3.forceX(500));
  //.force("collide",d3.forceCollide(.5));
  //.force("collide",d3.forceCollide( function(d){return d.r + 8 }).iterations(4) );


var link = g.append("g")
	.attr("class", "links")
	.selectAll("line")
	.data(links)
	.enter().append("line")
		.attr("stroke-width", 1 /*function(d) {...