JSFiddle - React, Tailwind, and code Playground

by alfredopacino

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
<!DOCTYPE html>
<svg width="960" height="500"></svg>

JavaScript

var svg = d3.select("svg"),
		width = +svg.attr("width"),
		height = +svg.attr("height"),
		color = d3.scaleOrdinal(d3.schemeCategory10);

	var a = {id: "1"},
		b = {id: "2"},
		c = {id: "3"},
		nodes = [a, b, c],
		links = [],
		NODE_CNT = nodes.length; //the nodes count so long

	links.push({source: a, target: b}); // Add a-b.
	links.push({source: b, target: c}); // Add b-c.
	links.push({source: c, target: a}); // Add c-a.

	var simulation = d3.forceSimulation(nodes)
		.force("charge", d3.forceManyBody().strength(-1000))
		.force("link", d3.forceLink(links).distance(200))
		.force("x", d3.forceX())
		.force("y", d3.forceY())
		.alphaTarget(1)
		.on("tick", ticked);

	var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
		link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link");
	// build the arrow.
	svg.append("svg:defs").selectAll("marker")
		.data(["end"])      // Different link/path types can be defined here
		.enter().append("svg:marker")    // This section adds in the arrows
		.attr("id", String)
		.attr("viewBox", "0 -5 10 10")
		.attr("refX", 15)
		.attr("refY", -1.5)
		.attr("markerWidth", 6)
		.attr("markerHeight", 6)
		.attr("orient", "auto")
		.append("svg:path")
		.attr("d", "M0,-5L10,0L0,5");

	var node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node");

	update();

	function update() {

		// Apply the general update pattern to the nodes.
		node = node.data(nodes, function (d) {
			return d.id;
		});
		node.exit().remove();
		node = node.enter().append("circle").attr("fill", function (d) {
			return color(d.id);
		}).attr("r", 8).merge(node);
		node.on("click", addNodeAndEdges);

		// Apply the general update pattern to the links.
		link = link.data(links, function (d) {
			return d.source.id + "-" + d.target.id;
		});
		link.exit().remove();
		link = link.enter().append("line").merge(link)
			.attr("marker-end", "url(#end)");...