diff options
Diffstat (limited to 'www/lib/vis/examples/network')
56 files changed, 503 insertions, 70 deletions
diff --git a/www/lib/vis/examples/network/basicUsage.html b/www/lib/vis/examples/network/basicUsage.html index 278b938e..2b8b086c 100644 --- a/www/lib/vis/examples/network/basicUsage.html +++ b/www/lib/vis/examples/network/basicUsage.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/data/datasets.html b/www/lib/vis/examples/network/data/datasets.html index df93b81a..c4bb5f8f 100644 --- a/www/lib/vis/examples/network/data/datasets.html +++ b/www/lib/vis/examples/network/data/datasets.html @@ -4,7 +4,7 @@ <title>Network | Dynamic Data</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/data/dotLanguage/dotLanguage.html b/www/lib/vis/examples/network/data/dotLanguage/dotLanguage.html index d7ae8c63..318aa91d 100644 --- a/www/lib/vis/examples/network/data/dotLanguage/dotLanguage.html +++ b/www/lib/vis/examples/network/data/dotLanguage/dotLanguage.html @@ -3,7 +3,7 @@ <title>Network | DOT Language</title> <script src="../../../../dist/vis.js"></script> - <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script src="../../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html b/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html index 352c553d..b31bfd48 100644 --- a/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html +++ b/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html @@ -5,7 +5,7 @@ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="../../../../dist/vis.js"></script> - <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body, html { diff --git a/www/lib/vis/examples/network/data/dynamicData.html b/www/lib/vis/examples/network/data/dynamicData.html index 0b736675..1c54e34b 100644 --- a/www/lib/vis/examples/network/data/dynamicData.html +++ b/www/lib/vis/examples/network/data/dynamicData.html @@ -53,7 +53,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> var nodes, edges, network; diff --git a/www/lib/vis/examples/network/data/importingFromGephi.html b/www/lib/vis/examples/network/data/importingFromGephi.html index 857acb91..f39f15a4 100644 --- a/www/lib/vis/examples/network/data/importingFromGephi.html +++ b/www/lib/vis/examples/network/data/importingFromGephi.html @@ -7,7 +7,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link type="text/css" rel="stylesheet" href="../../../dist/vis.css"> + <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css"> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/data/scalingCustom.html b/www/lib/vis/examples/network/data/scalingCustom.html index 0172a886..b1ffede5 100644 --- a/www/lib/vis/examples/network/data/scalingCustom.html +++ b/www/lib/vis/examples/network/data/scalingCustom.html @@ -15,7 +15,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/data/scalingNodesEdges.html b/www/lib/vis/examples/network/data/scalingNodesEdges.html index 3d80fa33..a19e7e10 100644 --- a/www/lib/vis/examples/network/data/scalingNodesEdges.html +++ b/www/lib/vis/examples/network/data/scalingNodesEdges.html @@ -15,7 +15,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/data/scalingNodesEdgesLabels.html b/www/lib/vis/examples/network/data/scalingNodesEdgesLabels.html index bf8b2571..fc41fbb7 100644 --- a/www/lib/vis/examples/network/data/scalingNodesEdgesLabels.html +++ b/www/lib/vis/examples/network/data/scalingNodesEdgesLabels.html @@ -15,7 +15,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/edgeStyles/arrowTypes.html b/www/lib/vis/examples/network/edgeStyles/arrowTypes.html new file mode 100644 index 00000000..25cf63bf --- /dev/null +++ b/www/lib/vis/examples/network/edgeStyles/arrowTypes.html @@ -0,0 +1,55 @@ +<!doctype html> +<html> +<head> + <title>Network | Basic usage</title> + + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + #mynetwork { + width: 600px; + height: 400px; + border: 1px solid lightgray; + } + </style> +</head> +<body> + +<p> + There two type of liner endings. The classical "arrow" (default) and "circle". +</p> + +<div id="mynetwork"></div> + +<script type="text/javascript"> + // create an array with nodes + var nodes = new vis.DataSet([ + {id: 1, label: 'X'}, + {id: 2, label: 'Y'}, + {id: 3, label: 'Z'} + ]); + + // create an array with edges + var edges = new vis.DataSet([ + {from: 1, to: 2, arrows:'to'}, + {from: 2, to: 3, arrows:{ + to: { + type: 'circle' + } + }}, + ]); + + // create a network + var container = document.getElementById('mynetwork'); + var data = { + nodes: nodes, + edges: edges + }; + var options = {}; + var network = new vis.Network(container, data, options); +</script> + +<script src="../../googleAnalytics.js"></script> +</body> +</html> diff --git a/www/lib/vis/examples/network/edgeStyles/arrows.html b/www/lib/vis/examples/network/edgeStyles/arrows.html index 6baed1cf..b9d43636 100644 --- a/www/lib/vis/examples/network/edgeStyles/arrows.html +++ b/www/lib/vis/examples/network/edgeStyles/arrows.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/edgeStyles/colors.html b/www/lib/vis/examples/network/edgeStyles/colors.html index 2c2916ac..99d98b11 100644 --- a/www/lib/vis/examples/network/edgeStyles/colors.html +++ b/www/lib/vis/examples/network/edgeStyles/colors.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/edgeStyles/dashes.html b/www/lib/vis/examples/network/edgeStyles/dashes.html index f545b832..941fdc5e 100644 --- a/www/lib/vis/examples/network/edgeStyles/dashes.html +++ b/www/lib/vis/examples/network/edgeStyles/dashes.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/edgeStyles/smooth.html b/www/lib/vis/examples/network/edgeStyles/smooth.html index 899ed627..2b222bdb 100644 --- a/www/lib/vis/examples/network/edgeStyles/smooth.html +++ b/www/lib/vis/examples/network/edgeStyles/smooth.html @@ -4,7 +4,7 @@ <title>Network | Static smooth curves</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html b/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html index 12846011..02b95d6b 100644 --- a/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html +++ b/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html @@ -6,7 +6,7 @@ <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"> + <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css"> <script src="../datasources/WorldCup2014.js"></script> diff --git a/www/lib/vis/examples/network/events/interactionEvents.html b/www/lib/vis/examples/network/events/interactionEvents.html index 3e329723..33f1ae70 100644 --- a/www/lib/vis/examples/network/events/interactionEvents.html +++ b/www/lib/vis/examples/network/events/interactionEvents.html @@ -4,7 +4,7 @@ <title>Network | Interaction events</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/events/physicsEvents.html b/www/lib/vis/examples/network/events/physicsEvents.html index 83933e9f..418f403a 100644 --- a/www/lib/vis/examples/network/events/physicsEvents.html +++ b/www/lib/vis/examples/network/events/physicsEvents.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/events/renderEvents.html b/www/lib/vis/examples/network/events/renderEvents.html index ec0ad440..e28e4ea3 100644 --- a/www/lib/vis/examples/network/events/renderEvents.html +++ b/www/lib/vis/examples/network/events/renderEvents.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/exampleApplications/disassemblerExample.html b/www/lib/vis/examples/network/exampleApplications/disassemblerExample.html index 0245999a..8ecd8e39 100644 --- a/www/lib/vis/examples/network/exampleApplications/disassemblerExample.html +++ b/www/lib/vis/examples/network/exampleApplications/disassemblerExample.html @@ -7,7 +7,7 @@ border: 1px solid lightgray; } </style> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script src="../../../dist/vis.js"></script> </head> <body> diff --git a/www/lib/vis/examples/network/exampleApplications/lesMiserables.html b/www/lib/vis/examples/network/exampleApplications/lesMiserables.html index bf39a462..b97c32b0 100644 --- a/www/lib/vis/examples/network/exampleApplications/lesMiserables.html +++ b/www/lib/vis/examples/network/exampleApplications/lesMiserables.html @@ -12,7 +12,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> function draw() { diff --git a/www/lib/vis/examples/network/exampleApplications/loadingBar.html b/www/lib/vis/examples/network/exampleApplications/loadingBar.html index e410312d..519289e4 100644 --- a/www/lib/vis/examples/network/exampleApplications/loadingBar.html +++ b/www/lib/vis/examples/network/exampleApplications/loadingBar.html @@ -86,7 +86,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> function draw() { diff --git a/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html b/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html index 1db8623e..8e05d482 100644 --- a/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html +++ b/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html @@ -4,7 +4,7 @@ <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"> + <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css"> <script src="../datasources/WorldCup2014.js"></script> diff --git a/www/lib/vis/examples/network/exampleApplications/nodeLegend.html b/www/lib/vis/examples/network/exampleApplications/nodeLegend.html index fdf4ef81..69769d9b 100644 --- a/www/lib/vis/examples/network/exampleApplications/nodeLegend.html +++ b/www/lib/vis/examples/network/exampleApplications/nodeLegend.html @@ -19,7 +19,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/exampleApplications/worldCupPerformance.html b/www/lib/vis/examples/network/exampleApplications/worldCupPerformance.html index 191ad22d..7de0667b 100644 --- a/www/lib/vis/examples/network/exampleApplications/worldCupPerformance.html +++ b/www/lib/vis/examples/network/exampleApplications/worldCupPerformance.html @@ -6,7 +6,7 @@ <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"> + <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css"> <script src="../datasources/WorldCup2014.js"></script> diff --git a/www/lib/vis/examples/network/labels/labelAlignment.html b/www/lib/vis/examples/network/labels/labelAlignment.html index 2397e219..42eb9bd0 100644 --- a/www/lib/vis/examples/network/labels/labelAlignment.html +++ b/www/lib/vis/examples/network/labels/labelAlignment.html @@ -4,7 +4,7 @@ <title>Network | Label alignment</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/labels/labelBackground.html b/www/lib/vis/examples/network/labels/labelBackground.html index 33bcd2d4..01664a67 100644 --- a/www/lib/vis/examples/network/labels/labelBackground.html +++ b/www/lib/vis/examples/network/labels/labelBackground.html @@ -4,7 +4,7 @@ <title>Network | Label alignment</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/labels/labelColorAndSize.html b/www/lib/vis/examples/network/labels/labelColorAndSize.html index e387b9a7..f91a0d22 100644 --- a/www/lib/vis/examples/network/labels/labelColorAndSize.html +++ b/www/lib/vis/examples/network/labels/labelColorAndSize.html @@ -3,7 +3,7 @@ <head> <title>Network | Label stroke</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/labels/labelStroke.html b/www/lib/vis/examples/network/labels/labelStroke.html index 89794501..71a7dccd 100644 --- a/www/lib/vis/examples/network/labels/labelStroke.html +++ b/www/lib/vis/examples/network/labels/labelStroke.html @@ -3,7 +3,7 @@ <head> <title>Network | Label stroke</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/labels/multilineText.html b/www/lib/vis/examples/network/labels/multilineText.html index 852b18d6..99dc8eb2 100644 --- a/www/lib/vis/examples/network/labels/multilineText.html +++ b/www/lib/vis/examples/network/labels/multilineText.html @@ -12,7 +12,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function draw() { diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayout.html b/www/lib/vis/examples/network/layout/hierarchicalLayout.html index d827814c..d8e317ec 100644 --- a/www/lib/vis/examples/network/layout/hierarchicalLayout.html +++ b/www/lib/vis/examples/network/layout/hierarchicalLayout.html @@ -17,7 +17,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html index 51f55267..6664bd2d 100644 --- a/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html @@ -15,7 +15,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var network = null; diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html index dd77bb6b..de536e54 100644 --- a/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html @@ -15,7 +15,7 @@ } </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html index 27854810..55670d7c 100644 --- a/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html @@ -4,7 +4,7 @@ <title>Hierarchical Layout without Physics</title> <script type="text/javascript" src="../../../dist/vis.js"></script> <script type="text/javascript" src="../datasources/largeHierarchicalDataset.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #network{ width: 1000px; diff --git a/www/lib/vis/examples/network/layout/randomSeed.html b/www/lib/vis/examples/network/layout/randomSeed.html index f2b6d131..1ca075ae 100644 --- a/www/lib/vis/examples/network/layout/randomSeed.html +++ b/www/lib/vis/examples/network/layout/randomSeed.html @@ -4,7 +4,7 @@ <title>Network | Setting the random seed</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html b/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html index 4eca8191..e80590b7 100644 --- a/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html +++ b/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html @@ -17,7 +17,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; @@ -29,7 +29,7 @@ var LENGTH_SUB = 50; - var data = '<svg xmlns="http://www.w3.org/2000/svg" width="390" height="65">' + + var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="390" height="65">' + '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' + '<foreignObject x="15" y="10" width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' + @@ -40,11 +40,8 @@ '</foreignObject>' + '</svg>'; - var DOMURL = window.URL || window.webkitURL || window; - var img = new Image(); - var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'}); - var url = DOMURL.createObjectURL(svg); + var url = "data:image/svg+xml;charset=utf-8,"+ encodeURIComponent(svg); // Called when the Visualization API is loaded. function draw() { diff --git a/www/lib/vis/examples/network/nodeStyles/circularImages.html b/www/lib/vis/examples/network/nodeStyles/circularImages.html index 46cf898e..b0f144c5 100644 --- a/www/lib/vis/examples/network/nodeStyles/circularImages.html +++ b/www/lib/vis/examples/network/nodeStyles/circularImages.html @@ -16,7 +16,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var DIR = 'img/soft-scraps-icons/'; diff --git a/www/lib/vis/examples/network/nodeStyles/colors.html b/www/lib/vis/examples/network/nodeStyles/colors.html index 900ab3bf..05bae1dd 100644 --- a/www/lib/vis/examples/network/nodeStyles/colors.html +++ b/www/lib/vis/examples/network/nodeStyles/colors.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/nodeStyles/customGroups.html b/www/lib/vis/examples/network/nodeStyles/customGroups.html index bf810bcc..5c4b11c9 100644 --- a/www/lib/vis/examples/network/nodeStyles/customGroups.html +++ b/www/lib/vis/examples/network/nodeStyles/customGroups.html @@ -19,7 +19,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="../../googleAnalytics.js"></script> diff --git a/www/lib/vis/examples/network/nodeStyles/groups.html b/www/lib/vis/examples/network/nodeStyles/groups.html index 03778330..148ffa64 100644 --- a/www/lib/vis/examples/network/nodeStyles/groups.html +++ b/www/lib/vis/examples/network/nodeStyles/groups.html @@ -19,7 +19,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script src="../../googleAnalytics.js"></script> </head> diff --git a/www/lib/vis/examples/network/nodeStyles/icons.html b/www/lib/vis/examples/network/nodeStyles/icons.html index 0b27fbcb..859fc065 100644 --- a/www/lib/vis/examples/network/nodeStyles/icons.html +++ b/www/lib/vis/examples/network/nodeStyles/icons.html @@ -6,7 +6,7 @@ <title>Network | node as icon</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> diff --git a/www/lib/vis/examples/network/nodeStyles/images.html b/www/lib/vis/examples/network/nodeStyles/images.html index a64689d5..78810181 100644 --- a/www/lib/vis/examples/network/nodeStyles/images.html +++ b/www/lib/vis/examples/network/nodeStyles/images.html @@ -12,7 +12,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html b/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html index fdfe4abf..7c65cee6 100644 --- a/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html +++ b/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html @@ -16,7 +16,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var DIR = 'img/soft-scraps-icons/'; diff --git a/www/lib/vis/examples/network/nodeStyles/shadows.html b/www/lib/vis/examples/network/nodeStyles/shadows.html index bfa7b86a..277b8b00 100644 --- a/www/lib/vis/examples/network/nodeStyles/shadows.html +++ b/www/lib/vis/examples/network/nodeStyles/shadows.html @@ -19,7 +19,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script src="../../googleAnalytics.js"></script> </head> diff --git a/www/lib/vis/examples/network/nodeStyles/shapes.html b/www/lib/vis/examples/network/nodeStyles/shapes.html index 1f4b92ba..26625301 100644 --- a/www/lib/vis/examples/network/nodeStyles/shapes.html +++ b/www/lib/vis/examples/network/nodeStyles/shapes.html @@ -12,7 +12,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; @@ -34,15 +34,16 @@ {id: 11, label: 'star', shape: 'star'}, {id: 21, font:{size:30}, label: 'big circle', shape: 'circle' }, {id: 22, font:{size:30}, label: 'big ellipse', shape: 'ellipse'}, - {id: 23, font:{size:30}, label: 'big database',shape: 'database'}, - {id: 24, font:{size:30}, label: 'big box', shape: 'box' }, - {id: 25, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond'}, - {id: 26, font:{size:30}, size:40, label: 'big dot', shape: 'dot'}, - {id: 27, font:{size:30}, size:40, label: 'big square', shape: 'square'}, - {id: 28, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'}, - {id: 29, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'}, - {id: 30, font:{size:30}, label: 'big text', shape: 'text'}, - {id: 31, font:{size:30}, size:40, label: 'big star', shape: 'star'} + {id: 23, font:{size:30}, label: 'ellipse with a long label text', shape: 'ellipse'}, + {id: 24, font:{size:30}, label: 'big database',shape: 'database'}, + {id: 25, font:{size:30}, label: 'big box', shape: 'box' }, + {id: 26, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond'}, + {id: 27, font:{size:30}, size:40, label: 'big dot', shape: 'dot'}, + {id: 28, font:{size:30}, size:40, label: 'big square', shape: 'square'}, + {id: 29, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'}, + {id: 30, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'}, + {id: 31, font:{size:30}, label: 'big text', shape: 'text'}, + {id: 32, font:{size:30}, size:40, label: 'big star', shape: 'star'} ]; edges = [ diff --git a/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html b/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html index 9ba68e86..a2d65aed 100644 --- a/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html +++ b/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html @@ -12,7 +12,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/other/animationShowcase.html b/www/lib/vis/examples/network/other/animationShowcase.html index d68ef75e..1e0d82ae 100644 --- a/www/lib/vis/examples/network/other/animationShowcase.html +++ b/www/lib/vis/examples/network/other/animationShowcase.html @@ -36,7 +36,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html b/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html new file mode 100644 index 00000000..145dcb72 --- /dev/null +++ b/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html @@ -0,0 +1,107 @@ +<!doctype html> +<html> +<head> + <title>Network | Clustering</title> + + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + #mynetwork { + width: 600px; + height: 600px; + border: 1px solid lightgray; + } + p { + max-width:600px; + } + + h4 { + margin-bottom:3px; + } + </style> + <script src="../../googleAnalytics.js"></script> +</head> + +<body> + + +<p> +Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li> +<li>Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)</li> +<li>Clicking on an edge will also show the results of getBaseEdge and getClusteredEdge</li> +</ul> +</p> + +<div id="mynetwork"></div> +<pre id="eventSpan"></pre> + +<script type="text/javascript"> + // create an array with nodes + var nodes = [ + {id: 1, label: 'Node 1', color:'orange'}, + {id: 2, label: 'Node 2', color:'DarkViolet', font:{color:'white'}}, + {id: 3, label: 'Node 3', color:'orange'}, + {id: 4, label: 'Node 4', color:'DarkViolet', font:{color:'white'}}, + {id: 5, label: 'Node 5', color:'orange'}, + {id: 6, label: 'cid = 1', cid:1, color:'orange'}, + {id: 7, label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}}, + {id: 8, label: 'cid = 1', cid:1, color:'lime'}, + {id: 9, label: 'cid = 1', cid:1, color:'orange'}, + {id: 10, label: 'cid = 1', cid:1, color:'lime'} + ]; + + // create an array with edges + var edges = [ + {from: 1, to: 2}, + {from: 1, to: 3}, + {from: 10, to: 4}, + {from: 2, to: 5}, + {from: 6, to: 2}, + {from: 7, to: 5}, + {from: 8, to: 6}, + {from: 9, to: 7}, + {from: 10, to: 9} + ]; + + // create a network + var container = document.getElementById('mynetwork'); + var data = { + nodes: nodes, + edges: edges + }; + var options = {layout:{randomSeed:8}}; + var network = new vis.Network(container, data, options); + var clusterOptionsByData = { + joinCondition:function(childOptions) { + return childOptions.cid == 1; + }, + clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'} + }; + network.cluster(clusterOptionsByData); + + network.on("selectNode", function(params) { + if (params.nodes.length == 1) { + if (network.isCluster(params.nodes[0]) == true) { + network.clustering.updateClusteredNode(params.nodes[0], {shape : 'star'}); + } + } + }); + + network.on("selectEdge", function(params) { + if (params.edges.length == 1) { + // Single edge selected + var obj = {}; + obj.clicked_id = params.edges[0]; + network.clustering.updateEdge(params.edges[0], {color : '#aa0000'}); + obj.base_edge = network.clustering.getBaseEdge(params.edges[0]); + obj.all_clustered_edges = network.clustering.getClusteredEdges(params.edges[0]); + document.getElementById('eventSpan').innerHTML = '<h2>selectEdge event:</h2>' + JSON.stringify(obj, null, 4); + } + }); + + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/network/other/clustering.html b/www/lib/vis/examples/network/other/clustering.html index 2f2eb8eb..bd68c42f 100644 --- a/www/lib/vis/examples/network/other/clustering.html +++ b/www/lib/vis/examples/network/other/clustering.html @@ -4,7 +4,7 @@ <title>Network | Clustering</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/other/clusteringByZoom.html b/www/lib/vis/examples/network/other/clusteringByZoom.html index f7f8fa5a..e2391f16 100644 --- a/www/lib/vis/examples/network/other/clusteringByZoom.html +++ b/www/lib/vis/examples/network/other/clusteringByZoom.html @@ -4,7 +4,7 @@ <title>Network | Clustering</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/other/clustersOfclusters.html b/www/lib/vis/examples/network/other/clustersOfclusters.html new file mode 100644 index 00000000..0e90bcf0 --- /dev/null +++ b/www/lib/vis/examples/network/other/clustersOfclusters.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Cluster Test</title> + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <style type="text/css"> + #network_graph { + width: 1000px; + height: 800px; + border: 1px solid lightgray; + } + </style> +</head> +<body onload="draw()"> +<p> + Clusters can contain other clusters, but clusters of a single node is only possible by adding +<pre>allowSingleNodeCluster: true</pre> +to clusterNodeProperties<br/> +In this example repeatedly clicking on the node with open the Clusters. +</p> +<div id="network_graph"></div> +<div id="info"></div> +<script type="text/javascript"> + var network; + + var node_color = ['orange', 'green', 'red', 'yellow', 'cyan']; + var node_shape = ['star', 'database', 'diamond', 'square', 'triangle']; + var nodes = new vis.DataSet([ + {id: 'x', label: 'Node X'}, + {id: 'y', label: 'Node Y'}, + ]); + var network_options = {}; + var edges = new vis.DataSet([ + {from: 'x', to: 'y'} + ]); + + var cluster_id = 1; + + function draw() { + network = new vis.Network( + document.getElementById('network_graph'), + { + nodes: nodes, + edges: edges + }, + network_options + ); + network.on('click', function (params) { + if (params.nodes.length == 1) { + if (network.isCluster(params.nodes[0]) == true) { + network.openCluster(params.nodes[0]); + } + } + }); + cluster(); + cluster(); + cluster(); + } + + function cluster() { + var clusterOptions = { + joinCondition: function (childOptions) { + console.log(childOptions); + return true; + }, + clusterNodeProperties: {id: cluster_id, label: "Cluster " + cluster_id, color: node_color[cluster_id - 1], shape: node_shape[cluster_id - 1], allowSingleNodeCluster: true} + }; + cluster_id++; + network.cluster(clusterOptions); + } +</script> +</body> +</html> diff --git a/www/lib/vis/examples/network/other/configuration.html b/www/lib/vis/examples/network/other/configuration.html index 74bf9e79..a13470d4 100644 --- a/www/lib/vis/examples/network/other/configuration.html +++ b/www/lib/vis/examples/network/other/configuration.html @@ -29,7 +29,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/other/manipulation.html b/www/lib/vis/examples/network/other/manipulation.html index c2b34cd9..b399c098 100644 --- a/www/lib/vis/examples/network/other/manipulation.html +++ b/www/lib/vis/examples/network/other/manipulation.html @@ -1,6 +1,7 @@ <!doctype html> <html> <head> + <meta charset="utf-8"/> <title>Network | Manipulation</title> <style type="text/css"> @@ -54,7 +55,7 @@ </style> <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; @@ -64,6 +65,17 @@ var data = getScaleFreeNetwork(25); var seed = 2; + function setDefaultLocale() { + var defaultLocal = navigator.language; + var select = document.getElementById('locale'); + select.selectedIndex = 0; // set fallback value + for (var i = 0, j = select.options.length; i < j; ++i) { + if (select.options[i].getAttribute('value') === defaultLocal) { + select.selectedIndex = i; + break; + } + } + } function destroy() { if (network !== null) { @@ -135,11 +147,16 @@ callback(data); } + function init() { + setDefaultLocale(); + draw(); + } + </script> <script src="../../googleAnalytics.js"></script> </head> -<body onload="draw();"> +<body onload="init();"> <h2>Editing the nodes and edges (localized)</h2> <p style="width: 700px; font-size:14px; text-align: justify;"> The localization is only relevant to the manipulation buttons. @@ -148,8 +165,13 @@ <p> <label for="locale">Select a locale:</label> <select id="locale" onchange="draw();"> - <option value="en" selected>en</option> + <option value="en">en</option> + <option value="de">de</option> + <option value="es">es</option> + <option value="it">it</option> <option value="nl">nl</option> + <option value="pt-br">pt</option> + <option value="ru">ru</option> </select> </p> @@ -169,4 +191,3 @@ </body> </html> - diff --git a/www/lib/vis/examples/network/other/navigation.html b/www/lib/vis/examples/network/other/navigation.html index 3d7eda25..760bb539 100644 --- a/www/lib/vis/examples/network/other/navigation.html +++ b/www/lib/vis/examples/network/other/navigation.html @@ -29,7 +29,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; @@ -124,7 +124,7 @@ </table> <br /> Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above. - Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, the <b>vis.css</b> file must be included.</u> + Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, <b>vis.css</b> or <b>vis-network.min.css</b> must be included.</u> The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. </div> diff --git a/www/lib/vis/examples/network/other/performance.html b/www/lib/vis/examples/network/other/performance.html index 4d67fcc5..0b3ea663 100644 --- a/www/lib/vis/examples/network/other/performance.html +++ b/www/lib/vis/examples/network/other/performance.html @@ -24,7 +24,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/other/saveAndLoad.html b/www/lib/vis/examples/network/other/saveAndLoad.html new file mode 100644 index 00000000..08165c85 --- /dev/null +++ b/www/lib/vis/examples/network/other/saveAndLoad.html @@ -0,0 +1,177 @@ +<!doctype html> +<html> + <head> + <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> + <meta content="utf-8" http-equiv="encoding"> + <title>Network | Saving and loading networks</title> + + <style type="text/css"> + body { + font: 10pt sans; + } + #network { + float:left; + width: 600px; + height: 600px; + margin:5px; + border: 1px solid lightgray; + } + #config { + float:left; + width: 400px; + height: 600px; + } + #input_output { + height: 10%; + width: 15%; + } + + p { + font-size:16px; + max-width:700px; + } + </style> + + <script type="text/javascript" src="../exampleUtil.js"></script> + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <script src="../../googleAnalytics.js"></script> + </head> + + <body> + <p> + In this example, the network data can be exported to JSON and imported back into the network. + + Try this out by exporting the network to JSON, clearing the network and then importing it again. The nodes will all appear in the same position as they were before the network was destroyed. + </p> + + <div id="network"></div> + + <div> + <textarea id=input_output></textarea> + <input type="button" id="import_button" onclick="importNetwork()" value="import"></input> + <input type="button" id="export_button" onclick="exportNetwork()" value="export"></input> + <input type="button" id="destroy_button" onclick="destroyNetwork()" value="destroy"></input> + </div> + + <script type="text/javascript"> + var network; + var container; + var exportArea; + var importButton; + var exportButton; + + function init() { + container = document.getElementById('network'); + exportArea = document.getElementById('input_output'); + importButton = document.getElementById('import_button'); + exportButton = document.getElementById('export_button'); + + draw(); + } + + function addContextualInformation(elem, index, array) { + addId(elem, index); + addConnections(elem, index); + } + + function addId(elem, index) { + elem.id = index; + } + + function addConnections(elem, index) { + // need to replace this with a tree of the network, then get child direct children of the element + elem.connections = network.getConnectedNodes(index); + } + + function destroyNetwork() { + network.destroy(); + } + + function clearOutputArea() { + exportArea.value = ""; + } + + function draw() { + // create a network of nodes + var data = getScaleFreeNetwork(5); + + network = new vis.Network(container, data, {manipulation:{enabled:true}}); + + clearOutputArea(); + } + + function exportNetwork() { + clearOutputArea(); + + var nodes = objectToArray(network.getPositions()); + + nodes.forEach(addContextualInformation); + + // pretty print node data + var exportValue = JSON.stringify(nodes, undefined, 2); + + exportArea.value = exportValue; + + resizeExportArea(); + } + + function importNetwork() { + var inputValue = exportArea.value; + var inputData = JSON.parse(inputValue); + + var data = { + nodes: getNodeData(inputData), + edges: getEdgeData(inputData) + } + + network = new vis.Network(container, data, {}); + + resizeExportArea(); + } + + function getNodeData(data) { + var networkNodes = []; + + data.forEach(function(elem, index, array) { + networkNodes.push({id: elem.id, label: elem.id, x: elem.x, y: elem.y}); + }); + + return new vis.DataSet(networkNodes); + } + + function getEdgeData(data) { + var networkEdges = []; + + data.forEach(function(node, index, array) { + // add the connection + node.connections.forEach(function(connId, cIndex, conns) { + networkEdges.push({from: node.id, to: connId}); + + var elementConnections = array[connId].connections; + + // remove the connection from the other node to prevent duplicate connections + var duplicateIndex = elementConnections.findIndex(function(connection) { + connection === node.id; + }); + + elementConnections = elementConnections.splice(0, duplicateIndex - 1).concat(elementConnections.splice(duplicateIndex + 1, elementConnections.length)) + }); + }); + + return new vis.DataSet(networkEdges); + } + + function objectToArray(obj) { + return Object.keys(obj).map(function (key) { return obj[key]; }); + } + + function resizeExportArea() { + exportArea.style.height = (1 + exportArea.scrollHeight) + "px"; + } + + init(); + </script> + </body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/network/physics/physicsConfiguration.html b/www/lib/vis/examples/network/physics/physicsConfiguration.html index 5a95f215..d28d20db 100644 --- a/www/lib/vis/examples/network/physics/physicsConfiguration.html +++ b/www/lib/vis/examples/network/physics/physicsConfiguration.html @@ -24,7 +24,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; |