|
@ -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> |
|
|
|