vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

140 lines
3.2 KiB

<!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: 1400px;
height: 1000px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<my-toolbar>
<button id="toggleAddNode">add Nodes</button>
<button id="btnDelete">delete</button>
<!-- other Vis manipulation buttons -->
<button id="togglePhysics">pause Physics</button>
<button id="togglePin">toggle pin</button>
</my-toolbar>
<div id="mynetwork"></div>
<script>
document.getElementById("toggleAddNode").onclick = addNode;
document.getElementById("btnDelete").onclick = visDelete;
document.getElementById("togglePhysics").onclick = togglePhysics;
document.getElementById("togglePin").onclick = togglePin;
function storePositions() {
network.storePositions();
}
var inAddNodeMode = false;
function addNode() {
if (inAddNodeMode) {
network.disableEditMode();
inAddNodeMode = false;
} else {
network.addNodeMode();
inAddNodeMode = true;
}
}
function visDelete() {
network.deleteSelected();
}
function togglePhysics() {
isPhysicsEnabled = !isPhysicsEnabled;
network.setOptions({
physics: isPhysicsEnabled
});
}
var isPhysicsEnabled = true;
function togglePin() {
network.storePositions();
// update node.fixed
}
// 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: {
enabled: false,
initiallyActive: false,
addNode: false,
//addEdge: onConnectEdge,
//editNode: onEditNode,
//editEdge: true,
deleteNode: onDelete,
// this is false, but the manipulation api can still delete edges
deleteEdge: false
}
};
function onAddNode(nodeToBeAdded, callback) {
//$log.debug('onAdd', nodeToBeAdded);
console.log('onAdd');
// do stuff to the new node
inAddNodeMode = false;
callback(nodeToBeAdded);
}
function onDelete(toBeDeletedData, callback) {
console.log('deleting data', toBeDeletedData);
// toBeDeletedData is object with nodes: [] and edges: []
callback(toBeDeletedData);
}
var network = new vis.Network(container, data, options);
</script>
</body>
</html>