JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
    <body>
    <div id='container'>
        <div id='graph'></div>
    </div>
            </body>

JavaScript

var nodesData = [
  {
    id:0,
    name:"Extra McMonk"
  },
  {
    id:1,
    name:"Aloysius Jones"
  },
  {
    id:2,
    name:"Barnie Rubble"
  },
  {
    id:3,
    name:"Testing New Writer"
  }
];

var linksData = [
  {
    relationship:"Teacher/student",
    source:0,
    target:1
  },
  {
    relationship:"Enemies",
    source:0,
    target:2
  },
  {
    relationship:"Family",
    source:1,
    target:2
  },
  {
  	relationship:"Enemies",
  	source:3,
  	target:2
  }
 ]
	
var nodeColor = d3.scale.category10(); //Sets color for nodes
var linkColor = d3.scale.category10(); //Sets the color for links

var w = 200,
	h = 200;

var vis = d3.select("#graph")
	.append("svg:svg")
	.attr("width", w)
	.attr("height", h)
	.attr("pointer-events", "all")
	.attr("class", "vis")
	.append('svg:g')
	.call(d3.behavior.zoom().on("zoom", redraw))
	.append('svg:g');

vis.append('svg:rect')
    .attr('width', w)
    .attr('height', h)
    .attr('fill', 'rgba(1,1,1,0)');//For transparency

function redraw() {
	vis.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); }
	
	var force = d3.layout.force()
		.gravity(.6)
		.charge(-600)
		.linkDistance( 60 )
		.size([w, h]);
	
	var svg = d3.select(".text").append("svg")
		.attr("width", w)
		.attr("height", h);
		
		var link = vis.selectAll("line")
			.data(linksData)
			.enter().append("line")
			.style("stroke", function(d) { return         linkColor(d.relationship); })
        	.style("stroke-width", 1)
        	.attr("class", "connector");

		//Fixes drag
        	var drag = force.drag()
		    .origin(function(d) { return d; })
		    .on("dragstart", dragstarted)
		    .on("drag", dragged)
		    .on("dragend", dragended);
		//End fixing drag

		var node = vis.selectAll("g.node")
			.data(nodesData)
			.enter().append("svg:g")
			.attr("class","node")
			.call(drag)
			.classed('node', true);
			
			node.append("svg:circle")
		      .attr("r", 10) //Adjusts size of nodes' radius
		     ...