JSFiddle - React, Tailwind, and code Playground

by Richard

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<body>
  <div id="main"></div>
</body>

CSS

#main{
  border: 2px #555;
}

.link{
  stroke: #000;
}

.node{
  fill:#ccc;
}

JavaScript

var width = 900, height = 600;
  var radius = 5;

	var svg = d3.select('#main')
  	.append("svg")
    .attr("height", height)
    .attr("width", width);
  
  var nodes = [], links = [];
  
  var force = d3.layout.force()
  	.charge(-350)
    .linkDistance(50)
    .nodes(nodes)
    .links(links)
  	.size([height, width]);
    
	var node = svg.selectAll(".node"),
      link = svg.selectAll('.link');
      
  var drag = force.drag().on("dragstart", dragstart);
  
  var a = {id: 0, name:"zero", expandable: "false"};
  var b = {id: 1, name:"one", expandable: "true"};
  var c = {id: 2, name:"two", expandable: "true"};
  
  nodes.push(a);
    nodes.push(b);
      nodes.push(c);
  
  
  links.push({source: a, target: b});
  links.push({source: a, target: c});
	
  
  update();
  
  function update() {    
    var link = svg.selectAll(".link")
                    .data(links, function(d) { 
                    	return d.source.id + '-' + d.target.id; 
                    });

    link.enter().append("g").attr("class","link-g").append("line").attr("class", "link");
    link.exit().remove();
                
    var linktext = svg.selectAll(".link-g").append("text").text(function(d) { return 'asda';});

    node = node.data(force.nodes(), function(d) {return d.id;});
    node.exit().remove();

   	var appended = node.enter().append("g").call(drag);

		appended.append("circle")
    	.attr("class", "node")
    	.attr("r", "12");
   
    appended
    	//.on("dblclick", dblclick)
      .on("contextmenu", dragend);

    appended.append("text")
    	.attr("dx", "12")
    	.attr("dy", ".35em")
    	.text(function(d) { return d.name; });
   
		appended.append("title")
    	.text(function(d) {
	    	return "expandable: " + d.expandable;
    });

		force.on("tick", function() {
    	link.attr("x1", function(d) { 
      	return d.source.x; 
      })
      .attr("y1", function(d) { 
      	return d.source.y; 
      })
      .attr("x2", function(d) { 
      	return d.target.x;
      })
 ...