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.
246 lines
6.4 KiB
246 lines
6.4 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>JS Bin</title>
|
|
<script type="text/javascript" src="../dist/vis.js"></script> <!-- network handling framework -->
|
|
<link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
|
|
<style type="text/css">
|
|
#network{
|
|
width: 1900px;
|
|
height: 800px;
|
|
border: 1px solid lightgray;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Network Test</h1>
|
|
<div id="network"></div>
|
|
|
|
<script type="text/javascript">
|
|
var allNodes;
|
|
var allEdges;
|
|
var pathActive = false;
|
|
|
|
var nodes = [{
|
|
id: 1,
|
|
label: 'test1'
|
|
}, {
|
|
id: 2,
|
|
label: 'test2'
|
|
}, {
|
|
id: 3,
|
|
label: 'test3'
|
|
}, {
|
|
id: 4,
|
|
label: 'test4'
|
|
}, {
|
|
id: 5,
|
|
label: 'test5'
|
|
}];
|
|
var edges = [{
|
|
from: 1,
|
|
to: 3
|
|
}, {
|
|
from: 1,
|
|
to: 2
|
|
}, {
|
|
from: 3,
|
|
to: 4
|
|
}, {
|
|
from: 2,
|
|
to: 4
|
|
}, {
|
|
from: 4,
|
|
to: 5
|
|
}]
|
|
|
|
var nodesDataset = new vis.DataSet(nodes);
|
|
var edgesDataset = new vis.DataSet(edges);
|
|
|
|
var container = document.getElementById('mynetwork');
|
|
|
|
var data = {
|
|
nodes: nodesDataset,
|
|
edges: edgesDataset
|
|
};
|
|
|
|
var options = {
|
|
autoResize: true,
|
|
height: '100%',
|
|
width: '100%',
|
|
nodes: {
|
|
shape: 'box'
|
|
},
|
|
edges: {
|
|
smooth: {
|
|
enabled: true,
|
|
type: "dynamic"
|
|
},
|
|
},
|
|
layout: {
|
|
hierarchical: {
|
|
levelSeparation: 220,
|
|
nodeSpacing: 120,
|
|
treeSpacing: 100,
|
|
direction: 'LR',
|
|
blockShifting: true,
|
|
sortMethod: 'directed',
|
|
edgeMinimization: false
|
|
}
|
|
},
|
|
physics: {
|
|
hierarchicalRepulsion: {
|
|
centralGravity: 0.5,
|
|
springLength: 300,
|
|
springConstant: 0.1,
|
|
nodeDistance: 150,
|
|
damping: 0.09
|
|
},
|
|
}
|
|
};
|
|
|
|
var network = new vis.Network(container, data, options);
|
|
|
|
allNodes = nodesDataset.get({
|
|
returnType: "Object"
|
|
});
|
|
allEdges = edgesDataset.get({
|
|
returnType: "Object"
|
|
});
|
|
|
|
showPath();
|
|
showPath();
|
|
|
|
function getNodeId(nodeLabels) {
|
|
var resultArray = [];
|
|
var unmatchedNodesLabel = [];
|
|
|
|
for (var i = 0; i < nodeLabels.length; i++) {
|
|
for (var nodeId in allNodes) {
|
|
var matchflag = false;
|
|
|
|
if (nodeLabels[i].toUpperCase() === allNodes[nodeId].label.toUpperCase()) {
|
|
resultArray.push(allNodes[nodeId].id);
|
|
matchflag = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!matchflag) {
|
|
console.log('An unmatched nodeLabel exists!' + nodeLabels[i]);
|
|
}
|
|
}
|
|
|
|
return resultArray;
|
|
}
|
|
|
|
function getLinkedEdge(fromNodeId, toNodeId) {
|
|
var result;
|
|
|
|
if (fromNodeId) {
|
|
var allLinkedEdges = network.getConnectedEdges(fromNodeId);
|
|
|
|
for (var i = 0; i < allLinkedEdges.length; i++) {
|
|
var linkedNodes = network.getConnectedNodes(allLinkedEdges[i]);
|
|
|
|
for (var j = 0; j < linkedNodes.length; j++) {
|
|
if (toNodeId === linkedNodes[j]) {
|
|
result = allLinkedEdges[i];
|
|
if (j == 0) {
|
|
if (allEdges[allLinkedEdges[i]].arrows === undefined) {
|
|
allEdges[allLinkedEdges[i]].arrows = 'from';
|
|
} else {
|
|
allEdges[allLinkedEdges[i]].arrows = 'to;from';
|
|
}
|
|
} else {
|
|
if (allEdges[allLinkedEdges[i]].arrows === undefined) {
|
|
allEdges[allLinkedEdges[i]].arrows = 'to';
|
|
} else {
|
|
allEdges[allLinkedEdges[i]].arrows = 'to;from';
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
function updateNodesEdges() {
|
|
// update nodes and edges
|
|
var updateNodes = [];
|
|
var updateEdges = [];
|
|
|
|
for (var nodeId in allNodes) {
|
|
if (allNodes.hasOwnProperty(nodeId)) {
|
|
updateNodes.push(allNodes[nodeId]);
|
|
}
|
|
}
|
|
|
|
for (var edgeId in allEdges) {
|
|
if (allEdges.hasOwnProperty(edgeId)) {
|
|
updateEdges.push(allEdges[edgeId]);
|
|
}
|
|
}
|
|
|
|
nodesDataset.update(updateNodes);
|
|
edgesDataset.update(updateEdges);
|
|
}
|
|
|
|
function showPath() {
|
|
// Test values
|
|
var pathData = 'test1,test3,test4,test5';
|
|
var nodesOrder = pathData.split(',');
|
|
|
|
var orderedNodeId = getNodeId(nodesOrder);
|
|
|
|
if (orderedNodeId.length > 0) {
|
|
pathActive = true;
|
|
|
|
// mark all nodes as hard to read
|
|
for (var nodeId in allNodes) {
|
|
allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
|
|
}
|
|
|
|
// mark all edges as hard to read
|
|
for (var edgeId in allEdges) {
|
|
allEdges[edgeId].color = 'rgba(200,200,200,0.5)';
|
|
}
|
|
|
|
// the selected nodes and edges get its own color and its label back.
|
|
for (var i = 0; i < orderedNodeId.length; i++) {
|
|
allNodes[orderedNodeId[i]].color = undefined;
|
|
|
|
// linked edge
|
|
if (i < orderedNodeId.length) {
|
|
var linkedEdge = getLinkedEdge(orderedNodeId[i], orderedNodeId[i + 1]);
|
|
|
|
if (linkedEdge) {
|
|
allEdges[linkedEdge].color = undefined;
|
|
}
|
|
}
|
|
}
|
|
|
|
updateNodesEdges();
|
|
}
|
|
|
|
// reset all nodes
|
|
for (var nodeId in allNodes) {
|
|
allNodes[nodeId].color = undefined;
|
|
}
|
|
|
|
// reset all edges <--- it does NOT work! although edge's color undfined!
|
|
for (var edgeId in allEdges) {
|
|
allEdges[edgeId].color = null;
|
|
allEdges[edgeId].arrows = null;
|
|
}
|
|
|
|
updateNodesEdges();
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|