|
|
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>JS Bin</title>
- <script type="text/javascript" src="../dist/vis.js"></script>
- <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
- <style>
- #mynetwork {
- width: 700px;
- height: 450px;
- border: 1px solid lightgray;
- }
- </style>
-
- <style type="text/css">
- #mynetwork {
- width: 600px;
- height: 400px;
- border: 1px solid lightgray;
- }
- </style>
-
- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
- <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
-
- </head>
- <body>
-
- <p>
- Create a simple network with some nodes and edges.
- </p>
-
- <div id="mynetwork"></div>
-
- <script type="text/javascript">
- // create an array with nodes
- var nodes = new vis.DataSet([
- {id: 1, label: 'Node 1',shape: 'icon',
- icon: {
- face: 'FontAwesome',
- code: '\uf0c0',
- size: 50,
- color: 'rgba(255,0,0,0.5)'
- }},
- {id: 3, label: 'Node 3', color:'rgba(0,0,0,0.5)'},
- ]);
-
- // create an array with edges
- var edges = new vis.DataSet([
- {from: 1, to: 3},
- ]);
-
- // create a network
- var container = document.getElementById('mynetwork');
- var data = {
- nodes: nodes,
- edges: edges
- };
- var options = {edges:{arrows:'from'}};
- var network = new vis.Network(container, data, options);
- </script>
-
- </body>
- </html>
|
