70 lines
1.7 KiB
HTML
Executable File
70 lines
1.7 KiB
HTML
Executable File
<html>
|
|
<head>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div id="mynetwork"></div>
|
|
<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' }
|
|
]);
|
|
|
|
// create an array with edges
|
|
var edges = new vis.DataSet([
|
|
{ from: 1, to: 2 },
|
|
{ from: 2, to: 3 }
|
|
]);
|
|
|
|
var container = document.getElementById('mynetwork');
|
|
var data = {
|
|
nodes: nodes,
|
|
edges: edges
|
|
};
|
|
var options = {
|
|
interaction: {
|
|
navigationButtons: true,
|
|
keyboard: true,
|
|
hover: true,
|
|
multiselect: true,
|
|
hideEdgesOnDrag: false,
|
|
hideNodesOnDrag: false,
|
|
dragView: true,
|
|
zoomView: true
|
|
},
|
|
manipulation: {
|
|
enabled: true,
|
|
initiallyActive: true,
|
|
addNode: function(nodeData, callback) {
|
|
nodeData.id = (Math.random() * 1000000).toFixed(0);
|
|
nodeData.label = 'Node ' + nodeData.id;
|
|
nodes.add(nodeData);
|
|
callback(nodeData);
|
|
},
|
|
editNode: function(nodeData, callback) {
|
|
nodeData.label = 'Node ' + nodeData.id;
|
|
nodes.update(nodeData);
|
|
callback(nodeData);
|
|
},
|
|
deleteNode: function(nodeData, callback) {
|
|
nodes.remove(nodeData.id);
|
|
callback(nodeData);
|
|
}
|
|
}
|
|
};
|
|
var network = new vis.Network(container, data, options);
|
|
|
|
network.on('oncontext', function(properties) {
|
|
var nodeId = properties.nodes[0];
|
|
var node = nodes.get(nodeId);
|
|
|
|
// display context menu
|
|
// ...
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|