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.
184 lines
4.8 KiB
184 lines
4.8 KiB
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Network | Random nodes</title>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
font: 10pt sans;
|
|
}
|
|
#mynetwork {
|
|
width: 600px;
|
|
height: 600px;
|
|
border: 1px solid lightgray;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="../../dist/vis.js"></script>
|
|
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
|
|
|
<script type="text/javascript">
|
|
var nodes = null;
|
|
var edges = null;
|
|
var network = null;
|
|
|
|
function draw() {
|
|
nodes = new vis.DataSet([{
|
|
id: '1001',
|
|
value: '1'
|
|
}, {
|
|
id: '1009',
|
|
value: '2'
|
|
}, {
|
|
id: '1061',
|
|
value: '3'
|
|
}, {
|
|
id: '1226',
|
|
value: '4'
|
|
}]);
|
|
edges = new vis.DataSet([{
|
|
id: '1001_1061',
|
|
from: '1001',
|
|
to: '1061',
|
|
value: '1'
|
|
}, {
|
|
id: '1001_1226',
|
|
from: '1001',
|
|
to: '1226',
|
|
value: '1'
|
|
}, {
|
|
id: '1009_1061',
|
|
from: '1009',
|
|
to: '1061',
|
|
value: '2'
|
|
}, {
|
|
id: '1009_1226',
|
|
from: '1009',
|
|
to: '1226',
|
|
value: '1'
|
|
}, {
|
|
id: '1061_1226',
|
|
from: '1061',
|
|
to: '1226',
|
|
value: '1'
|
|
}]);
|
|
var container = document.getElementById('mynetwork');
|
|
var data = {
|
|
nodes: nodes,
|
|
edges: edges
|
|
};
|
|
var nodeNormalColor = { // For 'normal' nodes
|
|
background: '#92bbc7',
|
|
border: '#5d93a6',
|
|
borderWidth: 2,
|
|
highlight: {
|
|
background: '#5d93a6',
|
|
border: '#537286'
|
|
}
|
|
};
|
|
var nodeBlurColor = { // For 'blurred' nodes
|
|
background: '#f0f0f0',
|
|
border: '#f0f0f0'
|
|
};
|
|
|
|
var edgeNormalColor = {
|
|
color: '#5d93a6',
|
|
highlight: '#28132b'
|
|
};
|
|
var edgeBlurColor = {
|
|
color: '#f0f0f0',
|
|
highlight: '#f0f0f0'
|
|
};
|
|
|
|
var options = {
|
|
nodes: {
|
|
shape: 'dot',
|
|
color: nodeNormalColor
|
|
},
|
|
edges: {
|
|
inheritColor: false,
|
|
color: edgeNormalColor,
|
|
widthSelectionMultiplier: 1
|
|
},
|
|
physics: {
|
|
'barnesHut': {
|
|
centralGravity: 0.5,
|
|
springLength: 150,
|
|
springConstant: 0.03,
|
|
damping: 0.2
|
|
}
|
|
}
|
|
};
|
|
network = new vis.Network(container, data, options);
|
|
|
|
// add event listeners
|
|
network.on('select', function (params) {
|
|
console.log(params.edges);
|
|
|
|
var nodesData = {};
|
|
var edgesData = {};
|
|
var nodeResetQuery = [];
|
|
var edgeResetQuery = [];
|
|
|
|
var allEdges = edges.get();
|
|
var allNodes = nodes.get();
|
|
for (var i = 0; i < allNodes.length; i++) {
|
|
nodesData[allNodes[i].id] = {id:allNodes[i].id, color: nodeBlurColor};
|
|
nodeResetQuery.push({id:allNodes[i].id, color: nodeNormalColor});
|
|
|
|
}
|
|
for (var i = 0; i < allEdges.length; i++) {
|
|
edgesData[allEdges[i].id] = {id:allEdges[i].id, color: edgeBlurColor};
|
|
edgeResetQuery.push({id:allEdges[i].id, color: edgeNormalColor});
|
|
}
|
|
|
|
// deselect
|
|
if (params.nodes.length == 0 && params.edges.length == 0) {
|
|
nodes.update(nodeResetQuery);
|
|
edges.update(edgeResetQuery);
|
|
return;
|
|
}
|
|
|
|
// paint nodes and edges.
|
|
for (var i = 0; i < params.nodes.length; i++) {
|
|
nodesData[params.nodes[i]].color = nodeNormalColor;
|
|
}
|
|
for (var i = 0; i < params.edges.length; i++) {
|
|
edgesData[params.edges[i]].color = edgeNormalColor;
|
|
var selEdge = edges.get(params.edges[i]);
|
|
nodesData[selEdge.to].color = nodeNormalColor;
|
|
nodesData[selEdge.from].color = nodeNormalColor;
|
|
}
|
|
|
|
var nodeUpdateQuery = [];
|
|
var edgeUpdateQuery = [];
|
|
for (var nodeId in nodesData) {
|
|
if (nodesData.hasOwnProperty(nodeId)) {
|
|
nodeUpdateQuery.push(nodesData[nodeId]);
|
|
}
|
|
}
|
|
for (var edgeId in edgesData) {
|
|
if (edgesData.hasOwnProperty(edgeId)) {
|
|
edgeUpdateQuery.push(edgesData[edgeId]);
|
|
}
|
|
}
|
|
|
|
nodes.update(nodeUpdateQuery);
|
|
edges.update(edgeUpdateQuery);
|
|
// nodes.update(nodeResetQuery);
|
|
// edges.update(edgeResetQuery);
|
|
// nodes.update(nodeUpdateQuery);
|
|
// edges.update(edgeUpdateQuery);
|
|
});}
|
|
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="draw();">
|
|
<br>
|
|
<div id="mynetwork"></div>
|
|
|
|
<p id="selection"></p>
|
|
</body>
|
|
</html>
|