dodox/vacuumDecay
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add templaet for visuaklizer

Browse Source
This commit is contained in:
Dominik Moritz Roth 2024-06-10 18:11:33 +02:00
parent 6bb5bfbdb0
commit ecdf0b8392
1 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
vacuumDecay/templates/index.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game Tree Visualization</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<body>
<div id="graph"></div>
<script>
var socket = io.connect('http://' + document.domain + ':' + location.port);
var svg = d3.select("#graph").append("svg")
.attr("width", window.innerWidth)
.attr("height", window.innerHeight);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(100))
.force("charge", d3.forceManyBody().strength(-300))
.force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2));
var link = svg.append("g")
.attr("class", "links")
.selectAll("line");
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle");
socket.on('update', function(data) {
var nodes = data.nodes;
var edges = data.edges;
link = link.data(edges);
link.exit().remove();
link = link.enter().append("line").merge(link);
node = node.data(nodes);
node.exit().remove();
node = node.enter().append("circle")
.attr("r", 5)
.attr("fill", function(d) {
var age = Date.now() - d.last_updated;
return d3.interpolateCool(Math.min(age / 10000, 1));
})
.merge(node);
simulation.nodes(nodes)
.on("tick", ticked);
simulation.force("link")
.links(edges);
simulation.alpha(1).restart();
});
function ticked() {
link
.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; });
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
</script>
</body>
</html>