JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="graph"></div>

CSS

text {
  font-family: sans-serif;
  pointer-events: none;
}
html,body { width:100%; height:100%; margin:none; padding:none; }
#graph { width:100%;height:100%; margin:auto; }

JavaScript

var dnodes = [];
var dlinks = [];
var default_link_color = "#bbb";
var link_default_width = 2;
var min_zoom = 0.1;
var max_zoom = 7;


function initdiagram(el) {
var im = this;
var w = $(el).innerWidth();
var h = $(el).innerHeight();

var connector = d3.svg.line().interpolate("linear");

var zoom = d3.behavior.zoom().scaleExtent([min_zoom, max_zoom]);

var selectedNode1 = null;
var selectedNode2 = null;

var mainsvg = d3.select(el).append("svg")
    .attr("class","mainsvg")
    .attr("width", w)
    .attr("height", h)
    .on("mousemove", function(){
      if(selectedNode1 !== null)
      {
        var cm = d3.mouse(this);
        var newX = cm[0] - translateVar[0] ;
				var newY = cm[1] - translateVar[1] ;
					if(scaleVar > 0)
					{
						newX = newX / scaleVar;
						newY = newY / scaleVar;
					}
        templink.attr("d",function(){
          return connector([[selectedNode1.x  , selectedNode1.y ], [ newX  , newY]]);
        });
      }
      if((selectedNode1 !== null) && (selectedNode2 !== null))
      {
        templink.attr("d",null);
      }

    });

var svg = mainsvg.append("svg")
      .attr("class","svg")
      .attr("viewBox", "0 0 " + w + " " + h)
      .attr("preserveAspectRatio", "xMidYMid");
var g = svg.append("g")
      .attr('width', w)
      .attr('height', h);


var translateVar = [0,0];
var scaleVar = 0;
  
zoom.on("zoom", function() {
		translateVar[0] = d3.event.translate[0];
		translateVar[1] = d3.event.translate[1];
		scaleVar = d3.event.scale;
    g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
      });

mainsvg.call(zoom).on("dblclick.zoom", null); //Disabling zoom on double click

function findNode(id) {
    for (var i in dnodes) {
        if (dnodes[i]["id"] === id) return dnodes[i];
    }
}

this.addNode = function(id) {
  var newNode = findNode(id);
  if (newNode == undefined) {
    dnodes.push({
      "id": id,
      fixed:false
    });
  }
}

this.addLink = function(sourceId,...