JSFiddle - React, Tailwind, and code Playground

CSS

.Chip{
        fill: red;
        /*stroke: black;*/
        stroke-width: 2px;
    }
    .Abstraction{
        fill: blue;
        /*stroke: black;*/
        stroke-width: 2px;
    }
    .Properties{
        fill: green;
        stroke: black;
        stroke-width: 2px;
    }
	.link {
    stroke: #777;
    stroke-width: 2px;
	}

JavaScript

var width = 500, height = 500, colors = d3.scale.category10();
        var svg = null, force = null;
        var circle = null, path = null;
        var nodes = null, links = null;
        var nodesArray = null, linkArray = null;
		var count = 0;
		var element = "body"; var numEdges = 4, numNodes = 5;
		var i = 0; var L = 16, r = 12, lineLimit = 10;
		var d = 2 * r + L;
		var R = (count - 1) * d;
		var m = width / 2;
		var X;
		var drag = d3.behavior.drag()
					.on('dragstart', dragstart)
					.on('drag', dragmove)
					.on('dragend', dragend);
		svg = d3.selectAll(element).append('svg').attr('width', width).attr('height', height);
    
		nodes = d3.range(numNodes).map(function () {
			X = m - (R / 2) + (i * d);
			++i;
			return {
				x: X,
				y: (height) / 3,
				fx: X,
				fy: height / 3,
				id: i-1,
				reflexive: true
			};           
		});
    
		for (var i = 0; i < numNodes; ++i) {
			d3.select(element).append("h3").text("Node " + i + ": " + nodes[i].id);
		}
		
		i = -1;
		links = d3.range(numEdges).map(function () {
			i++;
			return {
				//
				source: nodes[i],
				target: nodes[i+1],
				left: false,
				right: true
			}
		});
		for (var i = 0; i < numEdges; ++i) {
			d3.select(element).append("h3").text("Source: " + links[i].source.id + " Target: " + links[i].target.id);
		}
		
		force = d3.layout.force().size([width, height]).nodes(nodes).links(links).linkDistance(40).linkStrength(0.1).charge(-300);
		
		linkArray = svg.selectAll('.link').data(links).enter().append('line').attr('class', 'link')
			.attr('x1', function (d) {
				return nodes[d.source.id].x;
			})
			.attr('y1', function (d) { return nodes[d.source.id].y; })
			.attr('x2', function (d) { return nodes[d.target.id].x; })
			.attr('y2', function (d) { return nodes[d.target.id].y; });

		nodeArray = svg.selectAll("circle").data(nodes).enter().append('circle').attr('class', "Properties").attr('r', 12)
			.attr('cx', function (d) { return d.x })
			.attr('cy', function (d) { return d.y...