Network-Customelement/dynamic_usage_example.html
2024-08-09 21:56:32 +02:00

47 lines
1.1 KiB
HTML
Executable File

<!doctype html>
<html>
<head>
<title>JsNetworkx Custom Element</title>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.js"></script>
<script src="jsnetworkx.js"></script>
<script src="widget.js"></script>
</head>
<body>
<net-graph id="graph2" weighted="true" style="border-style: dotted; width:800px; height:600px;">
{
"nodes": [
[ 1, { "radius": 5, "color": "yellow"} ],
[ 2, { "radius": 15, "color": "green"} ],
[ 3, { "radius": 25, "color": "red"} ]
],
"edges": [
[1, 2, {"color": "red"}]
]
}
</net-graph>
<net-graph id="graph" weighted="true" style="border-style: dotted; width:800px; height:600px;" />
<script>
let ele = document.getElementById("graph");
let i = 10;
setInterval(()=>{
ele.G.addNode(i, { "radius": Math.floor(Math.random() * 30), "color": "red"} );
ele.G.addEdge(i - 1, i);
if(i > 20) i = -10;
i += 1;
},1000);
</script>
</body>
</html>