JSFiddle - React, Tailwind, and code Playground

by IPWright83

CSS

.node {
    fill: steelblue;
}



svg {
    border: thin solid red;
}

JavaScript

var w = 500;
var h = 500;
var nodes = [ 
    { name: "fixed", fixed: true, x: 250, y: 250, radius: 1, color: "black" }, 
    { name: "group_1", color: "black", radius: 1 }, 
    { name: "group_2", color: "black", radius: 1 }, 
    { name: "group_3", color: "black", radius: 1 }, 
    { name: "group_4", color: "black", radius: 1 },
    { name: "g1_A", color: "red", radius: 5 },
    { name: "g1_B", color: "red", radius: 15 },
    { name: "g1_C", color: "red", radius: 25 },
    { name: "g2_A", color: "green", radius: 30 },
    { name: "g2_B", color: "green", radius: 30 },
    { name: "g2_C", color: "green", radius: 30 },
    { name: "g3_A", color: "orange", radius: 30 },
    { name: "g3_B", color: "orange", radius: 30 },
    { name: "g3_C", color: "orange", radius: 30 },
    { name: "g4_A", color: "blue", radius: 30 },
    { name: "g4_B", color: "blue", radius: 30 },
    { name: "g4_C", color: "blue", radius: 30 },
    { name: "g1_D", color: "red", radius: 20 },
    { name: "g1_E", color: "red", radius: 30 },
    { name: "g1_F", color: "red", radius: 10 },
    { name: "locked", color: "orange", radius: 20 },
];
var links = [
    { "source": 1, "target": 5 },
    { "source": 1, "target": 6 },
    { "source": 1, "target": 7 },
    { "source": 1, "target": 17 },
    { "source": 1, "target": 18 },
    { "source": 1, "target": 19 },
    { "source": 2, "target": 8 },
    { "source": 2, "target": 9 },
    { "source": 2, "target": 10 },
     { "source": 3, "target": 11 },
    { "source": 3, "target": 12 },
    { "source": 3, "target": 13 },
     { "source": 4, "target": 14 },
    { "source": 4, "target": 15 },
    { "source": 4, "target": 16 },
    { "source": 0, "target" : 20 }
];


var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .size([w, h])
    .linkStrength(0.1)
    .friction(0.9)
    .distance(20)
    .charge(-600)
    .gravity(0.2)
    .theta(0.8)
    .alpha(0.05);
    

force.on("tick", function(e) {
  console.log("tick");
    var q =...