|
|
@ -0,0 +1,184 @@ |
|
|
|
<!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> |