Tobias/Network-Customelement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dynamic example

Browse Source
This commit is contained in:
Tobias Weise 2025-08-14 18:47:12 +02:00
parent 670432e96e
commit e5d79ea6fb
3 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dynamic_usage_example.html Executable file → Normal file
View File

@ -8,24 +8,22 @@
<script src="widget.js"></script> <script src="widget.js"></script>
</head> </head>
<body> <body>
<net-graph id="graph2" weighted="true" style="border-style: dotted; width:800px; height:600px;"> <net-graph id="graph2" weighted="true" style="width:800px; height:600px;">
{ {
"nodes": [ "nodes": [
[ 1, { "radius": 5, "color": "yellow"} ], [ "orange", { "radius": 5, "color": "orange"} ],
[ 2, { "radius": 15, "color": "green"} ], [ 2, { "radius": 15, "color": "green"} ],
[ 3, { "radius": 25, "color": "red"} ] [ 3, { "radius": 25, "color": "red"} ]
], ],
"edges": [ "edges": [
[1, 2, {"color": "red"}] ["orange", 2]
] ]
} }
</net-graph> </net-graph>
<net-graph id="graph" weighted="true" style="border-style: dotted; width:800px; height:600px;" /> <net-graph id="graph" weighted="true" style="width:800px; height:600px;" />
<script> <script>
let ele = document.getElementById("graph"); let ele = document.getElementById("graph");

4
usage_example.html Executable file → Normal file
View File

@ -11,8 +11,8 @@
<net-graph style="border-style: dotted; width:800px; height:600px;"> <net-graph style="border-style: dotted; width:800px; height:600px;">
{ {
"nodes": [ "nodes": [
[ 1, { "radius": 5, "color": "yellow"} ], [ 1, { "radius": 5, "color": "yellow", "label": "Sun"} ],
[ 2, { "radius": 15, "color": "green"} ], [ 2, { "radius": 15, "color": "green", "label": "Jupyter"} ],
[ 3, { "radius": 25, "color": "red"} ] [ 3, { "radius": 25, "color": "red"} ]
], ],
"edges": [ "edges": [

32
widget.js Executable file → Normal file
View File

@ -19,17 +19,16 @@ class NetGraphElement extends HTMLElement {
let style = this.hasAttribute('style') ? this.getAttribute('style') : ""; let style = this.hasAttribute('style') ? this.getAttribute('style') : "";
let weighted = this.hasAttribute('weighted') ? JSON.parse(this.getAttribute('weighted')) : false; let weighted = this.hasAttribute('weighted') ? JSON.parse(this.getAttribute('weighted')) : false;
let withLabels = this.hasAttribute('withLabels') ? JSON.parse(this.getAttribute('withLabels')) : true; let withLabels = this.hasAttribute('withLabels') ? JSON.parse(this.getAttribute('withLabels')) : true;
let label_color = this.hasAttribute('labelColor') ? this.getAttribute('labelColor') : "black";
this.content_div.style = style; this.content_div.style = style;
let that = this; let that = this;
jsnx.draw(that.G, { jsnx.draw(that.G, {
element: that.content_div, element: that.content_div,
weighted, weighted,
withLabels, withLabels,
labelStyle: {fill: 'white'}, labelStyle: {fill: label_color},
edgeStyle: { edgeStyle: {
'stroke-width': 5, 'stroke-width': 5,
fill: d => d.data[0].color fill: d => d.data[0].color
@ -38,28 +37,28 @@ class NetGraphElement extends HTMLElement {
fill: d => d.data.color fill: d => d.data.color
}, },
nodeAttr: { nodeAttr: {
r: d => d.data.radius | 10 r: d => d.data.radius | 10,
title: d => d.label
} }
}, true); //true ensures redrawing }, true); //true ensures redrawing
this.slot_ele.addEventListener('slotchange', e => { this.slot_ele.addEventListener('slotchange', e => {
try{ let text = that.innerText.trim();
let text = that.innerText.trim(); let{nodes, edges} = JSON.parse(text);
let{nodes, edges} = JSON.parse(text);
that.G.addNodesFrom(nodes, {color: 'black'} );
that.G.addEdgesFrom(edges, {color: 'black'} );
}
catch(e){
for(let[id, data] of nodes){
that.G.addNode(id, data);
}
for(let[a, b, data] of edges){
that.G.addEdge(a, b, data);
} }
jsnx.draw(that.G, { jsnx.draw(that.G, {
element: that.content_div, element: that.content_div,
weighted, weighted,
withLabels, withLabels,
labelStyle: {fill: 'white'}, labelStyle: {fill: label_color},
edgeStyle: { edgeStyle: {
'stroke-width': 5, 'stroke-width': 5,
fill: d => d.data[0].color fill: d => d.data[0].color
@ -68,11 +67,10 @@ class NetGraphElement extends HTMLElement {
fill: d => d.data.color fill: d => d.data.color
}, },
nodeAttr: { nodeAttr: {
r: d => d.data.radius | 10 r: d => d.data.radius | 10,
title: d => d.label
} }
}, true); //true ensures redrawing }, true); //true ensures redrawing
that.slot_ele.style.display = "none"; that.slot_ele.style.display = "none";
that.content_div.children[0].setAttribute("width", that.content_div.style.width); that.content_div.children[0].setAttribute("width", that.content_div.style.width);