|
|
- <!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>
|
