You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
3.1 KiB
78 lines
3.1 KiB
<!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-network.min.css" rel="stylesheet" type="text/css" />
|
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.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: 12, label: 'hexagon', shape: 'hexagon'},
|
|
{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: 'ellipse with a long label text', shape: 'ellipse'},
|
|
{id: 24, font:{size:30}, label: 'big database',shape: 'database'},
|
|
{id: 25, font:{size:30}, label: 'big box', shape: 'box' },
|
|
{id: 26, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond'},
|
|
{id: 27, font:{size:30}, size:40, label: 'big dot', shape: 'dot'},
|
|
{id: 28, font:{size:30}, size:40, label: 'big square', shape: 'square'},
|
|
{id: 29, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'},
|
|
{id: 30, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'},
|
|
{id: 31, font:{size:30}, label: 'big text', shape: 'text'},
|
|
{id: 32, font:{size:30}, size:40, label: 'big star', shape: 'star'},
|
|
{id: 33, font:{size:30}, size:40, label: 'big hexagon', shape: 'hexagon'},
|
|
{id: 34, font:{size:30}, label: 'icon square', shape: 'square', icon: {code:'\uf164'} },
|
|
{id: 35, font:{size:30}, label: 'icon dot', shape: 'dot', icon: {code:'\uf165'} },
|
|
];
|
|
|
|
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>
|
|
|
|
|
|
<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>
|