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.
 
 
 

88 lines
2.2 KiB

<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../dist/vis.js"></script>
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
Create a simple network with some nodes and edges.
</p>
<input type="button" value="asdasa" onclick="b()">
<div id="mynetwork"></div>
<script type="text/javascript">
var nodes = [
{"id":"28","label":"SPD","shape":"image","image":"http://commons.wikimedia.org/wiki/Special:FilePath/SPD_logo.svg?width=300","x":7146,"y":1903},
{"id":"148","label":"Wladimir Putin","shape":"image","image":"http://commons.wikimedia.org/wiki/Special:FilePath/Vladimir_Putin_-_2006.jpg?width=300","x":7677,"y":1885}
];
var edges = []
var nodesDataset = new vis.DataSet(nodes);
var edgesDataset = new vis.DataSet(edges);
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 200,
label: {
min: 50,
max: 100,
drawThreshold: 10,
maxVisible: 60
}
},
font: {
size: 100,
face: 'Tahoma'
}
},
edges: {
width: 0.2,
color: {inherit: 'from'},
smooth: {
type: 'continuous'
}
},
physics: false,
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true,
navigationButtons: true,
keyboard: true
}
};
var container = document.getElementById('mynetwork');
network = new vis.Network(container, {nodes: nodesDataset, edges: edgesDataset}, options);
function b() {
var nodesToAdd = new vis.DataSet(nodes).get();
console.log(nodesToAdd);
nodesDataset.update(nodesToAdd);
}
</script>
</body>
</html>