jos
9 years ago
1 changed files with 0 additions and 95 deletions
Split 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> | |||