sbosse/jam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mon 21 Jul 22:43:21 CEST 2025

Browse Source
This commit is contained in:
sbosse 2025-07-21 22:59:03 +02:00
parent f951c7ea3a
commit 97618d7290
1 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
js/dos/ext/vis/examples/network/nodeStyles/shapes.html Normal file
View File

@ -0,0 +1,72 @@
<!doctype html>
<html>
<head>
<title>Network | Shapes</title>
<style type="text/css">
#mynetwork {
width: 1000px;
height: 800px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function draw() {
nodes = [
{id: 1, label: 'circle', shape: 'circle' },
{id: 2, label: 'ellipse', shape: 'ellipse'},
{id: 3, label: 'database',shape: 'database'},
{id: 4, label: 'box', shape: 'box' },
{id: 5, label: 'diamond', shape: 'diamond'},
{id: 6, label: 'dot', shape: 'dot'},
{id: 7, label: 'square', shape: 'square'},
{id: 8, label: 'triangle',shape: 'triangle'},
{id: 9, label: 'triangleDown', shape: 'triangleDown'},
{id: 10, label: 'text', shape: 'text'},
{id: 11, label: 'star', shape: 'star'},
{id: 21, font:{size:30}, label: 'big circle', shape: 'circle' },
{id: 22, font:{size:30}, label: 'big ellipse', shape: 'ellipse'},
{id: 23, font:{size:30}, label: 'big database',shape: 'database'},
{id: 24, font:{size:30}, label: 'big box', shape: 'box' },
{id: 25, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond'},
{id: 26, font:{size:30}, size:40, label: 'big dot', shape: 'dot'},
{id: 27, font:{size:30}, size:40, label: 'big square', shape: 'square'},
{id: 28, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'},
{id: 29, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'},
{id: 30, font:{size:30}, label: 'big text', shape: 'text'},
{id: 31, font:{size:30}, size:40, label: 'big star', shape: 'star'}
];
edges = [
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
network = new vis.Network(container, data, options);
}
</script>
<script src="../../googleAnalytics.js"></script>
<body onload="draw()">
<p>
Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
</p>
<div id="mynetwork"></div>
<div id="info"></div>
</body>
</html>