HTML
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<style>
/* Style Definitions */
button {
position: absolute;
top: 1em;
left: 1em;
}
.node {
stroke: white;
stroke-width: 2px;
}
.link {
stroke: gray;
stroke-width: 2px;
}
</style>
<button type="button" id="switch-btn">Switch Links</button>
<svg width="960" height="500"></svg>
<!--<script src="https://d3js.org/d3.v4.min.js"></script>-->
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>
// graph data store
// Part of original blocks-data.json
var graph = {
"nodes": [
{ "id": "0", "group": "1" },
{ "id": "1", "group": "2" },
{ "id": "2", "group": "2" },
{ "id": "3", "group": "2" },
{ "id": "4", "group": "2" },
{ "id": "5", "group": "3" },
{ "id": "6", "group": "3" },
{ "id": "7", "group": "3" },
{ "id": "8", "group": "3" }
],
"links1": [
{ "source": "0", "target": "1"},
{ "source": "0", "target": "2"},
{ "source": "0", "target": "3"},
{ "source": "0", "target": "4"},
{ "source": "1", "target": "5"},
{ "source": "2", "target": "6"},
{ "source": "3", "target": "7"},
{ "source": "4", "target": "8"},
{ "source": "1", "target": "8"},
{ "source": "2", "target": "5"},
{ "source": "3", "target": "6"},
{ "source": "4", "target": "7"}
],
"links2": [
{ "source": "0", "target": "5"},
{ "source": "0", "target": "6"},
{ "source": "0", "target": "7"},
{ "source": "0", "target": "8"},
{ "source": "5", "target": "6"},
{ "source": "5", "target": "8"},
{ "source": "7", "target": "6"},
{ "source": "7", "target": "8"},
{ "source": "1", "target": "5"},
{ "source": "2", "target": "6"},
{ "source": "3", "target": "7"},
{ "source": "4", "target": "8"}
]
};
// state variable for current link set
var firstLinks = true;
// svg and sizing
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// d3 color scheme
var color = d3.scaleOrdinal(d3.schemeCategory10);
// elements...