| @ -1,60 +1,95 @@ | |||||
| <!doctype html> | |||||
| <!DOCTYPE html> | |||||
| <html> | <html> | ||||
| <head> | <head> | ||||
| <title>Network | Basic usage</title> | |||||
| <script src="../dist/vis.js"></script> | |||||
| <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css"> | |||||
| <script type="text/javascript" src="../dist/vis.js"></script> | |||||
| <link href="../dist/vis.css" rel="stylesheet" type="text/css" /> | |||||
| <style type="text/css"> | |||||
| <style> | |||||
| #mynetwork { | #mynetwork { | ||||
| width: 600px; | |||||
| height: 400px; | |||||
| border: 1px solid lightgray; | |||||
| width: 1400px; | |||||
| height: 800px; | |||||
| border: 1px solid gray; | |||||
| } | } | ||||
| </style> | </style> | ||||
| </head> | </head> | ||||
| <body> | |||||
| <body onload="draw();"> | |||||
| <script src="https://rawgit.com/Tooa/6e17f2d7b8e34ef94719/raw/a10096a6b88c992c57d032b1ed3079d7cc4b1f51/data.js"></script> | |||||
| <div id="mynetwork"></div> | |||||
| <script> | |||||
| <p> | |||||
| Create a simple network with some nodes and edges. | |||||
| </p> | |||||
| for (var i = 0; i < nodes.length; i++) { | |||||
| nodes[i].mass = Math.ceil(2000* nodes[i].value); | |||||
| } | |||||
| <div id="mynetwork"></div> | |||||
| var nodesDataset = new vis.DataSet(nodes); | |||||
| var edgesDataset = new vis.DataSet(edges); | |||||
| <script type="text/javascript"> | |||||
| // create an array with nodes | |||||
| var nodes = new vis.DataSet([ | |||||
| {id: 1, label: 'Node 1'}, | |||||
| {id: 2, label: 'Node 2'}, | |||||
| {id: 3, label: 'Node 3'}, | |||||
| {id: 4, label: 'Node 4'}, | |||||
| {id: 5, label: 'Node 5'} | |||||
| ]); | |||||
| // create an array with edges | |||||
| var edges = new vis.DataSet([ | |||||
| {from: 1, to: 3}, | |||||
| {from: 1, to: 2}, | |||||
| {from: 2, to: 4}, | |||||
| {from: 2, to: 5} | |||||
| ]); | |||||
| // create a network | |||||
| var container = document.getElementById('mynetwork'); | |||||
| var data = { | |||||
| nodes: nodes, | |||||
| edges: edges | |||||
| }; | |||||
| var options = {manipulation:{ | |||||
| initiallyActive:true, | |||||
| addNode: false, | |||||
| // addEdge: false | |||||
| // editNode: true | |||||
| }}; | |||||
| var network = new vis.Network(container, data, options); | |||||
| </script> | |||||
| function redrawAll() { | |||||
| var container = document.getElementById('mynetwork'); | |||||
| var options = { | |||||
| nodes: { | |||||
| borderWidth:4, | |||||
| color: { | |||||
| border: '#406897', | |||||
| background: '#6AAFFF' | |||||
| }, | |||||
| scaling: { | |||||
| min: 10, | |||||
| max: 200, | |||||
| label: { | |||||
| min: 50, | |||||
| max: 100, | |||||
| drawThreshold: 10, | |||||
| maxVisible: 60 | |||||
| } | |||||
| }, | |||||
| font: { | |||||
| size: 20, | |||||
| color:'#000000' | |||||
| }, | |||||
| shapeProperties: { | |||||
| useBorderWithImage: true | |||||
| }, | |||||
| }, | |||||
| edges: { | |||||
| scaling: { | |||||
| min: 2, | |||||
| max: 50 | |||||
| }, | |||||
| color: { inherit: 'from' }, | |||||
| smooth: { | |||||
| type: 'continuous' | |||||
| } | |||||
| }, | |||||
| physics: { | |||||
| "barnesHut": { | |||||
| "gravitationalConstant": -19050, | |||||
| "centralGravity": 1.3, | |||||
| "springLength": 170, | |||||
| "springConstant": 0.035, | |||||
| "damping": 0.23 | |||||
| }, | |||||
| "minVelocity": 0.75, | |||||
| stabilization: { | |||||
| enabled: false, | |||||
| iterations: 2000, | |||||
| updateInterval: 25 | |||||
| } | |||||
| }, | |||||
| configure:'physics', | |||||
| interaction: { | |||||
| tooltipDelay: 200, | |||||
| hideEdgesOnDrag: true | |||||
| }, | |||||
| layout:{improvedLayout:false} | |||||
| }; | |||||
| <script src="../googleAnalytics.js"></script> | |||||
| network = new vis.Network(container, {nodes: nodesDataset, edges: edgesDataset}, options); | |||||
| } | |||||
| redrawAll(); | |||||
| </script> | |||||
| </body> | </body> | ||||
| </html> | </html> | ||||