d3 | force grouping via events

sketch using d3-force to split and join nodes via buttons

to help break this up, some sketches that show:

and this example shows user interaction to split and join via events

forked from eesur's block: d3 | force grouping via events

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        body{
            font-family: Consolas, monaco, monospace;
            position: relative;
            padding: 20px;
            color: #FDBB30;
            background: #130C0E;
        }
        button {
          font-size: 18px;
          background: #130C0E;
          color: #7AC143;
          border: none;
          outline:none;
          padding: 4px 8px;
          margin-right: 10px;
          letter-spacing: 5px;
        }
        button:hover {
          background: #7AC143;
          color: #130C0E;
        }
        circle:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <header>
        <button id='join'>JOIN</button>
        <button id='split'>SPLIT</button>
    </header>

</body>
</html>

https://d3js.org/d3.v5.min.js