jos
10 years ago
1 changed files with 0 additions and 95 deletions
Unified View
Diff Options
-
+0 -95examples/network/layout.html
+ 0
- 95
examples/network/layout.html
View File
| @ -1,95 +0,0 @@ | |||||
| <!doctype html> | |||||
| <html> | |||||
| <head> | |||||
| <title>Network | Basic usage</title> | |||||
| <script type="text/javascript" src="../../dist/vis.js"></script> | |||||
| <link href="../../dist/vis.css" rel="stylesheet" type="text/css"/> | |||||
| <style type="text/css"> | |||||
| #mynetwork { | |||||
| width: 1600px; | |||||
| height:800px; | |||||
| border: 1px solid lightgray; | |||||
| } | |||||
| </style> | |||||
| <body> | |||||
| <div id="mynetwork"></div> | |||||
| <script type="text/javascript"> | |||||
| // create an array with nodes | |||||
| var nodes = [ | |||||
| {id: 'network', shape:'database'}, | |||||
| {id: 'body', shape:'database'}, | |||||
| {id: 'nodes'}, | |||||
| {id: 'canvas'}, | |||||
| {id: 'edges'}, | |||||
| {id: 'nodesHandler'}, | |||||
| {id: 'edgesHandler'}, | |||||
| {id: 'selectionHandler'}, | |||||
| {id: 'interactionHandler'}, | |||||
| {id: 'view'}, | |||||
| {id: 'renderer'}, | |||||
| {id: 'physics'}, | |||||
| {id: 'layoutEngine'}, | |||||
| {id: 'clustering'}, | |||||
| {id: 'manipulation'}, | |||||
| {id: 'events'}, | |||||
| ]; | |||||
| // create an array with edges | |||||
| var edges = [ | |||||
| {from: 'network', to: 'body'}, | |||||
| {from: 'body', to: 'nodesHandler'}, | |||||
| {from: 'body', to: 'edgesHandler'}, | |||||
| {from: 'body', to: 'selectionHandler'}, | |||||
| {from: 'body', to: 'interactionHandler'}, | |||||
| {from: 'body', to: 'view'}, | |||||
| {from: 'body', to: 'renderer'}, | |||||
| {from: 'body', to: 'physics'}, | |||||
| {from: 'body', to: 'canvas'}, | |||||
| {from: 'body', to: 'layoutEngine'}, | |||||
| {from: 'body', to: 'clustering'}, | |||||
| {from: 'body', to: 'manipulation'}, | |||||
| {from: 'nodes', to: 'body'}, | |||||
| {from: 'nodes', to: 'nodesHandler'}, | |||||
| {from: 'edges', to: 'body'}, | |||||
| {from: 'edges', to: 'edgesHandler'}, | |||||
| {from: 'layoutEngine', to: 'nodesHandler'}, | |||||
| {from: 'canvas', to: 'manipulation'}, | |||||
| {from: 'canvas', to: 'renderer'}, | |||||
| {from: 'canvas', to: 'view'}, | |||||
| {from: 'canvas', to: 'selectionHandler'}, | |||||
| {from: 'canvas', to: 'interactionHandler'}, | |||||
| {from: 'selectionHandler', to: 'interactionHandler'}, | |||||
| {from: 'selectionHandler', to: 'manipulation'}, | |||||
| ]; | |||||
| // create a network | |||||
| var container = document.getElementById('mynetwork'); | |||||
| var data = { | |||||
| nodes: nodes, | |||||
| edges: edges | |||||
| }; | |||||
| var options = { | |||||
| edges: {arrows: 'to', smooth:true}, | |||||
| // layout:{hierarchical:{direction:'UD',levelSeparation: "260"}}, | |||||
| configure:'physics', | |||||
| // "physics": { | |||||
| // "hierarchicalRepulsion": { | |||||
| // "centralGravity": 0, | |||||
| // "nodeDistance": "220" | |||||
| // }, | |||||
| // "solver": "hierarchicalRepulsion" | |||||
| // } | |||||
| // physics:{stabilization:true} | |||||
| } | |||||
| var network = new vis.Network(container, data, options); | |||||
| // network.setOptions({nodes:{color:'red'}}) | |||||
| </script> | |||||
| </body> | |||||
| </html> | |||||