jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Updated examples 1 to 13

flowchartTest
jos 9 years ago
parent
357853e2ce
commit
ad088cde4d
16 changed files with 165 additions and 320 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +12
    -0
      examples/googleAnalytics.js
  2. +15
    -22
      examples/network/01_basic_usage.html
  3. +12
    -22
      examples/network/02_random_nodes.html
  4. +5
    -7
      examples/network/03_images.html
  5. +7
    -8
      examples/network/04_shapes.html
  6. +9
    -3
      examples/network/05_social_network.html
  7. +19
    -11
      examples/network/06_groups.html
  8. +9
    -4
      examples/network/07_selections.html
  9. +0
    -109
      examples/network/08_mobile_friendly.html
  10. +15
    -14
      examples/network/09_scaling.html
  11. +0
    -76
      examples/network/09_sizing.html
  12. +3
    -2
      examples/network/10_multiline_text.html
  13. +30
    -17
      examples/network/11_styling.html
  14. +17
    -12
      examples/network/13_dashed_lines.html
  15. +2
    -4
      examples/network/index.html
  16. +10
    -9
      lib/network/modules/components/nodes/shapes/Box.js

+ 12
- 0
examples/googleAnalytics.js View File

@ -0,0 +1,12 @@
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-61231638-1', 'auto');
ga('send', 'pageview');

+ 15
- 22
examples/network/01_basic_usage.html View File

@ -13,26 +13,29 @@
border: 1px solid lightgray; border: 1px solid lightgray;
} }
</style> </style>
</head>
<body> <body>
<p>
Create a simple network with some nodes and edges.
</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
var nodesDS = new vis.DataSet();
var nodes = [ var nodes = [
{id: 1, label: 'Node 1', value:3, title:'hello world', color:'red'},
{id: 2, label: 'Node 2', value:1, group:'bla'},
{id: 3, label: 'Node 3', value:5},
{id: 4, value:3},
{id: 5, label: 'Node 5', value:2}
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]; ];
// create an array with edges // create an array with edges
var edges = new vis.DataSet([ var edges = new vis.DataSet([
{from: 1, to: 1}, {from: 1, to: 1},
{from: 1, to: 3,id:'e1', dashes:{pattern:[10,15,2,5]}},
{from: 1, to: 3},
{from: 1, to: 2}, {from: 1, to: 2},
{from: 2, to: 4}, {from: 2, to: 4},
{from: 2, to: 5} {from: 2, to: 5}
@ -40,24 +43,14 @@
// create a network // create a network
var container = document.getElementById('mynetwork'); var container = document.getElementById('mynetwork');
nodesDS.add(nodes);
var data = { var data = {
nodes: nodesDS,
nodes: nodes,
edges: edges edges: edges
}; };
var options = {
edges:{color:'red'}
}
var options = {};
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
// network.setOptions({nodes:{color:'red'}})
nodesDS.update({id:1, color:undefined,label:'hi'});
</script> </script>
<pre>
var options = {
manipulation: 'hello',
physics:{barnesHut:{gravitationslPull:34}, solver:'banana'},
groups:{'bla':{color:{backsground:'red'}, borderWidth:5}}
}
</pre>
<script src="../googleAnalytics.js"></script>
</body> </body>
</html> </html>

+ 12
- 22
examples/network/02_random_nodes.html View File

@ -84,37 +84,27 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {physics:{stabilization:false}};
var options = {
physics: { stabilization: false }
};
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
// add event listeners
// network.on('select', function(params) {
// document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
// });
// network.on('stabilized', function (params) {
// document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
// });
// network.on('startStabilization', function (params) {
// document.getElementById('stabilization').innerHTML = 'Stabilizing...';
// });
// setTimeout(destroy,500);
} }
</script> </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
<body onload="draw();"> <body onload="draw();">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go" onclick="draw()">
<br>
<p>
Generate a random network with nodes and edges.
</p>
<p>
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go" onclick="draw()">
</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
<p id="selection"></p>
<p id="stabilization"></p>
</body> </body>
</html> </html>

+ 5
- 7
examples/network/03_images.html View File

@ -4,9 +4,6 @@
<title>Network | Images</title> <title>Network | Images</title>
<style type="text/css"> <style type="text/css">
body {
font: 10pt arial;
}
#mynetwork { #mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
@ -68,16 +65,17 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {
stabilize: false // stabilize positions before displaying
};
var options = {};
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
} }
</script> </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
<body onload="draw()"> <body onload="draw()">
<p>
Display nodes as images.
</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
</body> </body>

+ 7
- 8
examples/network/04_shapes.html View File

@ -4,11 +4,8 @@
<title>Network | Shapes</title> <title>Network | Shapes</title>
<style type="text/css"> <style type="text/css">
body {
font: 10pt arial;
}
#mynetwork { #mynetwork {
width: 100%;
width: 800px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
} }
@ -61,15 +58,17 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {
stabilize: false
};
var options = {};
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
} }
</script> </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
<body onload="draw()"> <body onload="draw()">
<p>
Nodes can have all sorts of shapes, colors and sizes. Edges can be drawn solid or dashed, and can have one or multiple arrows.
</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
<div id="info"></div> <div id="info"></div>

+ 9
- 3
examples/network/05_social_network.html View File

@ -62,13 +62,19 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {};
var options = {
physics: {stabilization: false}
};
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
} }
</script> </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()"> <body onload="draw()">
<p>
Create a social network showing the amount of interaction between people.
</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
<p> <p>
Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a> Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>

+ 19
- 11
examples/network/06_groups.html View File

@ -5,14 +5,14 @@
<style> <style>
body { body {
color:#ffffff;
font: 10pt arial;
color: #d3d3d3;
font: 12pt arial;
background-color:#222222; background-color:#222222;
} }
#mynetwork { #mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray;
border: 1px solid #444444;
background-color:#222222; background-color:#222222;
} }
</style> </style>
@ -137,23 +137,31 @@
var options = { var options = {
nodes: { nodes: {
shape: 'dot', shape: 'dot',
radius:30,
font:{color:'#ffffff'},
borderWidth:2
size: 30,
font: {
size: 32,
color: '#ffffff'
},
borderWidth: 2
},
edges : {
width: 2
} }
}; };
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
} }
</script> </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()"> <body onload="draw()">
<p>
Apply styling to groups of nodes.
</p>
<form onsubmit= "javascript: draw(); return false;"> <form onsubmit= "javascript: draw(); return false;">
Number of groups:
<input type="text" value="10" id="groupCount" style="width: 50px;">
Number of nodes per group:
<input type="text" value="3" id="nodeCount" style="width: 50px;">
Number of groups: <input type="text" value="10" id="groupCount" style="width: 50px;">
Number of nodes per group: <input type="text" value="3" id="nodeCount" style="width: 50px;">
<input type="submit" value="Go"> <input type="submit" value="Go">
</form> </form>
<br> <br>

+ 9
- 4
examples/network/07_selections.html View File

@ -13,12 +13,15 @@
border: 1px solid lightgray; border: 1px solid lightgray;
} }
</style> </style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body> <body>
<p>
Select nodes or edges by clicking them. To select multiple nodes, long-press (hold) them.
</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
<div id="info"></div>
<pre id="info"></pre>
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
@ -53,7 +56,9 @@
// add event listener // add event listener
network.on('select', function(properties) { network.on('select', function(properties) {
document.getElementById('info').innerHTML += 'selection: ' + JSON.stringify(properties) + '<br>';
console.log('select', properties);
delete properties.event;
document.getElementById('info').innerHTML = 'Selection: ' + JSON.stringify(properties, null, 2) + '<br>';
}); });
// set initial selection (id's of some nodes) // set initial selection (id's of some nodes)

+ 0
- 109
examples/network/08_mobile_friendly.html View File

@ -1,109 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Network | Mobile friendly</title>
<style type="text/css">
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mynetwork {
width: 100%;
height: 100%;
}
</style>
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<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;
// Called when the Visualization API is loaded.
function draw() {
nodes = [];
edges = [];
var EDGE_LENGTH = 50;
var connectionCount = [];
// randomly create some nodes
var nodeCount = 20;
var cols = parseInt(Math.sqrt(nodeCount));
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: '' + i
});
connectionCount[i] = 0;
// create links in a scale-free-network way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to,
length: EDGE_LENGTH
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
var from = i;
var to = j;
edges.push({
from: from,
to: to,
length: EDGE_LENGTH
});
connectionCount[from]++;
connectionCount[to]++;
}
}
// Create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false,
nodes: {
shape: 'dot',
radius: 24,
fontSize: 24
},
edges: {
width: 2
}
};
network = new vis.Network(container, data, options);
}
</script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body onload="draw()" onresize="network.redraw();">
<div id="mynetwork"></div>
</body>
</html>

examples/network/12_scalable_images.html → examples/network/09_scaling.html View File

@ -1,10 +1,10 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Network | Scalable images</title>
<title>Network | Sizing</title>
<style type="text/css"> <style type="text/css">
body {
html, body {
font: 10pt arial; font: 10pt arial;
} }
#mynetwork { #mynetwork {
@ -18,13 +18,10 @@
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> <script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var network = null; var network = null;
// Called when the Visualization API is loaded.
function draw() { function draw() {
// create people. // create people.
// value corresponds with the age of the person // value corresponds with the age of the person
@ -42,7 +39,7 @@
{id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'} {id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
]; ];
// create connetions between people
// create connections between people
// value corresponds with the amount of contact between two people // value corresponds with the amount of contact between two people
edges = [ edges = [
{from: 2, to: 8, value: 3, title: '3 emails per week'}, {from: 2, to: 8, value: 3, title: '3 emails per week'},
@ -58,7 +55,7 @@
{from: 2, to: 7, value: 4, title: '4 emails per week'} {from: 2, to: 7, value: 4, title: '4 emails per week'}
]; ];
// create a network
// Instantiate our network object.
var container = document.getElementById('mynetwork'); var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
@ -66,21 +63,25 @@
}; };
var options = { var options = {
nodes: { nodes: {
widthMin: 20, // min width in pixels
widthMax: 100 // max width in pixels
shape: 'dot',
scaling: {
min: 16, // px
max: 64 // px
}
}, },
edges: { edges: {
color: 'lightgray'
//color: 'gray'
} }
}; };
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
} }
</script> </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()"> <body onload="draw()">
<p>
Scale nodes and edges depending on their value. Hover over nodes and edges to get more information.
</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
<div id="info"></div>
</body> </body>
</html> </html>

+ 0
- 76
examples/network/09_sizing.html View File

@ -1,76 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Network | Sizing</title>
<style type="text/css">
html, body {
font: 10pt arial;
}
#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() {
// create people.
// value corresponds with the age of the person
nodes = [
{id: 1, value: 2, label:'Algie', title: 'Algie (2 years old)'},
{id: 2, value: 31, label: 'Alston', title: 'Alston (31 years old)'},
{id: 3, value: 12, label: 'Barney', title: 'Barney (12 years old)'},
{id: 4, value: 16, label: 'Coley', title: 'Coley (16 years old)'},
{id: 5, value: 17, label: 'Grant', title: 'Grant (17 years old)'},
{id: 6, value: 15, label: 'Langdon', title: 'Langdon (15 years old)'},
{id: 7, value: 6, label: 'Lee', title: 'Lee (6 years old)'},
{id: 8, value: 5, label: 'Merlin', title: 'Merlin (5 years old)'},
{id: 9, value: 30, label: 'Mick', title: 'Mick (30 years old)'},
{id: 10, value: 18, label: 'Tod', title: 'Tod (18 years old)'}
];
// create connections.
// value corresponds with the amount of contact between two people
edges = [
{from: 2, to: 8, value: 3, title: '3 emails per week'},
{from: 2, to: 9, value: 5, title: '5 emails per week'},
{from: 2, to: 10,value: 1, title: '1 emails per week'},
{from: 4, to: 6, value: 8, title: '8 emails per week'},
{from: 5, to: 7, value: 2, title: '2 emails per week'},
{from: 4, to: 5, value: 1, title: '1 emails per week'},
{from: 9, to: 10,value: 2, title: '2 emails per week'},
{from: 2, to: 3, value: 6, title: '6 emails per week'},
{from: 3, to: 9, value: 4, title: '4 emails per week'},
{from: 5, to: 3, value: 1, title: '1 emails per week'},
{from: 2, to: 7, value: 4, title: '4 emails per week'}
];
// Instantiate our network object.
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot'
}
};
network = new vis.Network(container, data, options);
}
</script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body onload="draw()">
<div id="mynetwork"></div>
</body>
</html>

+ 3
- 2
examples/network/10_multiline_text.html View File

@ -1,4 +1,4 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!doctype html>
<html> <html>
<head> <head>
<title>Network | Multiline text</title> <title>Network | Multiline text</title>
@ -43,7 +43,8 @@
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
} }
</script> </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()"> <body onload="draw()">
<div id="mynetwork"></div> <div id="mynetwork"></div>

examples/network/11_custom_style.html → examples/network/11_styling.html View File

@ -1,12 +1,9 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!doctype html>
<html> <html>
<head> <head>
<title>Network | Custom style</title> <title>Network | Custom style</title>
<style type="text/css"> <style type="text/css">
body {
font: 10pt arial;
}
#mynetwork { #mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
@ -60,15 +57,22 @@
// specify options // specify options
options = { options = {
stabilize: false,
physics: {
stabilization: false,
barnesHut: {
springLength:200
}
},
edges: { edges: {
width: 2, width: 2,
style: 'arrow',
arrows: 'to',
color: 'gray' color: 'gray'
}, },
nodes: { nodes: {
// default for all nodes // default for all nodes
fontFace: 'times',
font: {
face: 'times'
},
shape: 'circle', shape: 'circle',
color: { color: {
border: 'orange', border: 'orange',
@ -79,16 +83,17 @@
} }
} }
}, },
physics: {barnesHut:{springLength:200}}, // this is the correct way to set the length of the springs
groups: { groups: {
black: { black: {
// defaults for nodes in this group // defaults for nodes in this group
radius: 15,
size: 15,
color: 'black', color: 'black',
fontColor: 'white',
fontSize: 18,
fontFace: 'courier',
shape: 'rect'
font: {
color: 'white',
size: 18,
face: 'courier'
},
shape: 'box'
}, },
gray: { gray: {
color: { color: {
@ -99,8 +104,10 @@
background: 'lightgray' background: 'lightgray'
} }
}, },
fontSize: 18,
fontFace: 'arial',
font: {
size: 18,
face: 'arial'
},
shape: 'circle' shape: 'circle'
}, },
white: { white: {
@ -108,7 +115,9 @@
border: 'black', border: 'black',
background: 'white' background: 'white'
}, },
fontColor: 'red',
font: {
color: 'red'
},
shape: 'image', shape: 'image',
image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png' image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
} }
@ -124,8 +133,12 @@
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
} }
</script> </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<p>
Custom styles for nodes can be applied globally, per group, of to individual nodes. Same holds for edges.
</p>
<body onload="draw()"> <body onload="draw()">
<div id="mynetwork"></div> <div id="mynetwork"></div>
</body> </body>

+ 17
- 12
examples/network/13_dashed_lines.html View File

@ -23,17 +23,17 @@
var nodes = [ var nodes = [
{id: 1, label: 'dashed\nline\nexamples'}, {id: 1, label: 'dashed\nline\nexamples'},
{id: 2, label: 'default'}, {id: 2, label: 'default'},
{id: 3, label: 'dash.length: 20\ndash.gap: 20'},
{id: 4, label: 'dash.length: 20\ndash.gap: 5'},
{id: 5, label: 'dash.length: 5\ndash.gap: 20'},
{id: 6, label: 'dash.length: 20\ndash.gap: 5\ndash.altLength: 5'}
{id: 3, label: 'dashes: [20, 20]'},
{id: 4, label: 'dashes: [20, 5]'},
{id: 5, label: 'dashes: [5, 20]'},
{id: 6, label: 'dashes: [20, 5, 5, 5]'}
]; ];
var edges = [ var edges = [
{from: 1, to: 2, style: 'dash-line'},
{from: 1, to: 3, style: 'dash-line', dash: {length: 20, gap: 20}},
{from: 1, to: 4, style: 'dash-line', dash: {length: 20, gap: 5}},
{from: 1, to: 5, style: 'dash-line', dash: {length: 5, gap: 20}},
{from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
{from: 1, to: 2, dashes: true},
{from: 1, to: 3, dashes: [20, 20]},
{from: 1, to: 4, dashes: [20, 5]},
{from: 1, to: 5, dashes: [5, 20]},
{from: 1, to: 6, dashes: [20, 5, 5, 5]}
]; ];
// create the network // create the network
@ -46,13 +46,18 @@
nodes: { nodes: {
shape: 'box' shape: 'box'
}, },
physics: {barnesHut:{springLength:150}}, // this is the correct way to set the length of the springs
stabilize: false
physics: {
barnesHut: {
springLength: 150
},
stabilization: false
}
}; };
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
} }
</script> </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();"> <body onload="draw();">
<p> <p>

+ 2
- 4
examples/network/index.html View File

@ -19,11 +19,9 @@
<p><a href="05_social_network.html">05_social_network.html</a></p> <p><a href="05_social_network.html">05_social_network.html</a></p>
<p><a href="06_groups.html">06_groups.html</a></p> <p><a href="06_groups.html">06_groups.html</a></p>
<p><a href="07_selections.html">07_selections.html</a></p> <p><a href="07_selections.html">07_selections.html</a></p>
<p><a href="08_mobile_friendly.html">08_mobile_friendly.html</a></p>
<p><a href="09_sizing.html">09_sizing.html</a></p>
<p><a href="09_scaling.html">09_scaling.html</a></p>
<p><a href="10_multiline_text.html">10_multiline_text.html</a></p> <p><a href="10_multiline_text.html">10_multiline_text.html</a></p>
<p><a href="11_custom_style.html">11_custom_style.html</a></p>
<p><a href="12_scalable_images.html">12_scalable_images.html</a></p>
<p><a href="11_styling.html">11_styling.html</a></p>
<p><a href="13_dashed_lines.html">13_dashed_lines.html</a></p> <p><a href="13_dashed_lines.html">13_dashed_lines.html</a></p>
<p><a href="14_dot_language.html">14_dot_language.html</a></p> <p><a href="14_dot_language.html">14_dot_language.html</a></p>
<p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p> <p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>

+ 10
- 9
lib/network/modules/components/nodes/shapes/Box.js View File

@ -9,8 +9,8 @@ class Box extends NodeBase {
resize(ctx, selected) { resize(ctx, selected) {
if (this.width === undefined) { if (this.width === undefined) {
var margin = 5;
var textSize = this.labelModule.getTextSize(ctx,selected);
let margin = 5;
let textSize = this.labelModule.getTextSize(ctx,selected);
this.width = textSize.width + 2 * margin; this.width = textSize.width + 2 * margin;
this.height = textSize.height + 2 * margin; this.height = textSize.height + 2 * margin;
} }
@ -21,8 +21,8 @@ class Box extends NodeBase {
this.left = x - this.width / 2; this.left = x - this.width / 2;
this.top = y - this.height / 2; this.top = y - this.height / 2;
var borderWidth = this.options.borderWidth;
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
let borderWidth = this.options.borderWidth;
let selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
ctx.lineWidth = (selected ? selectionLineWidth : borderWidth); ctx.lineWidth = (selected ? selectionLineWidth : borderWidth);
@ -31,7 +31,8 @@ class Box extends NodeBase {
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background; ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
ctx.roundRect(this.left, this.top, this.width, this.height, this.options.size);
let borderRadius = 6;
ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
// draw shadow if enabled // draw shadow if enabled
this.enableShadow(ctx); this.enableShadow(ctx);
@ -52,10 +53,10 @@ class Box extends NodeBase {
distanceToBorder(ctx, angle) { distanceToBorder(ctx, angle) {
this.resize(ctx); this.resize(ctx);
var a = this.width / 2;
var b = this.height / 2;
var w = (Math.sin(angle) * a);
var h = (Math.cos(angle) * b);
let a = this.width / 2;
let b = this.height / 2;
let w = (Math.sin(angle) * a);
let h = (Math.cos(angle) * b);
return a * b / Math.sqrt(w * w + h * h); return a * b / Math.sqrt(w * w + h * h);
} }
} }

Write Preview
Loading…
Cancel
Save