JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<html>
<head><title>Hello</title>
<style>

.link line {
  stroke: #696969;
}

.link line.separator {
  stroke: #fff;
  stroke-width: 2px;
}

.node circle {
  stroke: #000;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
}

</style>
</head>
<body>
</body>
</html>

JavaScript

(function(){
  var width, height, rules, map, tasks, links, nodes, svg, tick, radius, force, link, node;
  width = 960;
  height = 500;
  rules = [['L1', 'L2'], ['L2', 'L3']];
  map = d3.map();
  rules.forEach(function(rule){
    map.set(rule[0], {
      fixed: false
    });
    return map.set(rule[1], false);
  });
  
  tasks = map.keys();
  links = rules.map(function(rule){
    return {
      source: tasks.indexOf(rule[0]),
      target: tasks.indexOf(rule[1])
    };
  });
  nodes = tasks.map(function(k){
    var entry;
    entry = {
      name: k
    };
    if (map.get(k).fixed) {
      entry.fixed = true;
      entry.x = map.get(k).x;
      entry.y = map.get(k).y;
    }
    return entry;
  });
  svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
    
    svg.append("svg:defs").append("svg:marker")
                                .attr("id", "arrow")
                                .attr("viewBox", "0 0 10 10")
                                .attr("refX", 27)
                                //.attr("o", function (d) { console.log( d )})
                                .attr("refY", 5)
                                .attr("markerUnits", "strokeWidth")
                                .attr("markerWidth", 8)
                                .attr("markerHeight", 6)
                                .attr("orient", "auto")
                                .style("stroke", "#ccc")
                                .append("svg:path")
                                .attr("d", "M 0 0 L 10 5 L 0 10 z");
 
  tick = function(){
    link.selectAll("line").attr("x1", function(d){
      return d.source.x;
    }).attr("y1", function(d){
      return d.source.y;
    }).attr("x2", function(d){
      return d.target.x;
    }).attr("y2", function(d){
      return d.target.y;
    }).attr("marker-end", "url(#arrow)");
    node.attr("transform", function(d){
      return "translate(" + d.x + "," + d.y + ")";
    });
  };
  radius =...