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
xxxxxxxxxx
<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>
<svg width="960" height="400">
<g id="vis" transform="translate(10, 10)"></g>
</svg>
<footer>
<span id="clickData"></span>
</footer>
<script src="//d3js.org/d3.v5.min.js" charset="utf-8"></script>
<!-- d3 code -->
<script src=".script-compiled.js" charset="utf-8"></script>
</body>
</html>
https://d3js.org/d3.v5.min.js