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