|
|
- <!DOCTYPE html>
- <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
- <html><head><meta http-equiv="content-type" content="text/html; charset=UTF8">
- <title>Network | Static smooth curves - World Cup Network</title>
-
- <script type="text/javascript" src="../../../dist/vis.js"></script>
- <link type="text/css" rel="stylesheet" href="../../../dist/vis.css">
-
- <script src="../datasources/WorldCup2014.js"></script>
-
- <style type="text/css">
- #mynetwork {
- width: 800px;
- height: 800px;
- border: 1px solid lightgray;
- }
- </style>
- <script src="../../googleAnalytics.js"></script>
- </head>
-
- <body>
-
- <h2>Dynamic Data - Neighbourhood Highlight</h2>
- <div style="width:800px; font-size:14px;">
- This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes.
- In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not
- they are connected to the selected node. The code doing the highlighting only takes about 1ms, the rest of the time is the redrawing of the network (9200 edges..).
- <br /><br />
- </div>
-
- <div id="mynetwork"></div>
-
- <script type="text/javascript">
- var network;
- var allNodes;
- var highlightActive = false;
-
- var nodesDataset = new vis.DataSet(nodes); // these come from WorldCup2014.js
- var edgesDataset = new vis.DataSet(edges); // these come from WorldCup2014.js
-
- function redrawAll() {
- var container = document.getElementById('mynetwork');
- var options = {
- nodes: {
- shape: 'dot',
- scaling: {
- min: 10,
- max: 30,
- label: {
- min: 8,
- max: 30,
- drawThreshold: 12,
- maxVisible: 20
- }
- },
- font: {
- size: 12,
- face: 'Tahoma'
- }
- },
- edges: {
- width: 0.15,
- color: {inherit: 'from'},
- smooth: {
- type: 'continuous'
- }
- },
- physics: false,
- interaction: {
- tooltipDelay: 200,
- hideEdgesOnDrag: true
- }
- };
- var data = {nodes:nodesDataset, edges:edgesDataset} // Note: data is coming from ./datasources/WorldCup2014.js
-
-
- network = new vis.Network(container, data, options);
-
- // get a JSON object
- allNodes = nodesDataset.get({returnType:"Object"});
-
- network.on("click",neighbourhoodHighlight);
- }
-
- function neighbourhoodHighlight(params) {
- // if something is selected:
- if (params.nodes.length > 0) {
- highlightActive = true;
- var i,j;
- var selectedNode = params.nodes[0];
- var degrees = 2;
-
- // mark all nodes as hard to read.
- for (var nodeId in allNodes) {
- allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
- if (allNodes[nodeId].hiddenLabel === undefined) {
- allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
- allNodes[nodeId].label = undefined;
- }
- }
- var connectedNodes = network.getConnectedNodes(selectedNode);
- var allConnectedNodes = [];
-
- // get the second degree nodes
- for (i = 1; i < degrees; i++) {
- for (j = 0; j < connectedNodes.length; j++) {
- allConnectedNodes = allConnectedNodes.concat(network.getConnectedNodes(connectedNodes[j]));
- }
- }
-
- // all second degree nodes get a different color and their label back
- for (i = 0; i < allConnectedNodes.length; i++) {
- allNodes[allConnectedNodes[i]].color = 'rgba(150,150,150,0.75)';
- if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
- allNodes[allConnectedNodes[i]].label = allNodes[allConnectedNodes[i]].hiddenLabel;
- allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
- }
- }
-
- // all first degree nodes get their own color and their label back
- for (i = 0; i < connectedNodes.length; i++) {
- allNodes[connectedNodes[i]].color = undefined;
- if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
- allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel;
- allNodes[connectedNodes[i]].hiddenLabel = undefined;
- }
- }
-
- // the main node gets its own color and its label back.
- allNodes[selectedNode].color = undefined;
- if (allNodes[selectedNode].hiddenLabel !== undefined) {
- allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
- allNodes[selectedNode].hiddenLabel = undefined;
- }
- }
- else if (highlightActive === true) {
- // reset all nodes
- for (var nodeId in allNodes) {
- allNodes[nodeId].color = undefined;
- if (allNodes[nodeId].hiddenLabel !== undefined) {
- allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
- allNodes[nodeId].hiddenLabel = undefined;
- }
- }
- highlightActive = false
- }
-
- // transform the object into an array
- var updateArray = [];
- for (nodeId in allNodes) {
- if (allNodes.hasOwnProperty(nodeId)) {
- updateArray.push(allNodes[nodeId]);
- }
- }
- nodesDataset.update(updateArray);
- }
-
- redrawAll()
-
- </script>
-
- </body></html>
|
