bricks/examples/t1.html
2023-09-14 10:28:07 +08:00

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>