Changes for v22.0.0.OS
This commit is contained in:
Thilina Hasantha
83
web/bower_components/vis/examples/network/nodeStyles/HTMLInNodes.html
vendored
Normal file
83
web/bower_components/vis/examples/network/nodeStyles/HTMLInNodes.html
vendored
Normal file
@@ -0,0 +1,83 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | HTML in nodex</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt arial;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
background-color:#eeeeee;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
var DIR = 'img/refresh-cl/';
|
||||
var LENGTH_MAIN = 150;
|
||||
var LENGTH_SUB = 50;
|
||||
|
||||
|
||||
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">' +
|
||||
' <em>I</em> am' +
|
||||
'<span style="color:white; text-shadow:0 0 20px #000000;">' +
|
||||
' HTML in SVG!</span>' +
|
||||
'</div>' +
|
||||
'</foreignObject>' +
|
||||
'</svg>';
|
||||
|
||||
|
||||
var url = "data:image/svg+xml;charset=utf-8,"+ encodeURIComponent(svg);
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function draw() {
|
||||
// Create a data table with nodes.
|
||||
nodes = [];
|
||||
|
||||
// Create a data table with links.
|
||||
edges = [];
|
||||
|
||||
nodes.push({id: 1, label: 'Get HTML', image: url, shape: 'image'});
|
||||
nodes.push({id: 2, label: 'Using SVG', image: url, shape: 'image'});
|
||||
edges.push({from: 1, to: 2, length: 300});
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
physics: {stabilization: false},
|
||||
edges: {smooth: false}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<p>
|
||||
This example demonstrates showing custom HTML in Nodes, by using an SVG image.
|
||||
</p>
|
||||
<p style="color: red;">
|
||||
WARNING: this is currently not supported by all browsers.
|
||||
</p>
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
102
web/bower_components/vis/examples/network/nodeStyles/circularImages.html
vendored
Normal file
102
web/bower_components/vis/examples/network/nodeStyles/circularImages.html
vendored
Normal file
@@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Circular images</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt arial;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
background-color:#333333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var DIR = 'img/soft-scraps-icons/';
|
||||
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function draw() {
|
||||
// create people.
|
||||
// value corresponds with the age of the person
|
||||
var DIR = '../img/indonesia/';
|
||||
nodes = [
|
||||
{id: 1, shape: 'circularImage', image: DIR + '1.png'},
|
||||
{id: 2, shape: 'circularImage', image: DIR + '2.png'},
|
||||
{id: 3, shape: 'circularImage', image: DIR + '3.png'},
|
||||
{id: 4, shape: 'circularImage', image: DIR + '4.png', label:"pictures by this guy!"},
|
||||
{id: 5, shape: 'circularImage', image: DIR + '5.png'},
|
||||
{id: 6, shape: 'circularImage', image: DIR + '6.png'},
|
||||
{id: 7, shape: 'circularImage', image: DIR + '7.png'},
|
||||
{id: 8, shape: 'circularImage', image: DIR + '8.png'},
|
||||
{id: 9, shape: 'circularImage', image: DIR + '9.png'},
|
||||
{id: 10, shape: 'circularImage', image: DIR + '10.png'},
|
||||
{id: 11, shape: 'circularImage', image: DIR + '11.png'},
|
||||
{id: 12, shape: 'circularImage', image: DIR + '12.png'},
|
||||
{id: 13, shape: 'circularImage', image: DIR + '13.png'},
|
||||
{id: 14, shape: 'circularImage', image: DIR + '14.png'},
|
||||
{id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"},
|
||||
{id: 16, shape: 'circularImage', image: DIR + 'anotherMissing.png', brokenImage: DIR + '9.png', label:"fallback image in action"}
|
||||
];
|
||||
|
||||
// create connections between people
|
||||
// value corresponds with the amount of contact between two people
|
||||
edges = [
|
||||
{from: 1, to: 2},
|
||||
{from: 2, to: 3},
|
||||
{from: 2, to: 4},
|
||||
{from: 4, to: 5},
|
||||
{from: 4, to: 10},
|
||||
{from: 4, to: 6},
|
||||
{from: 6, to: 7},
|
||||
{from: 7, to: 8},
|
||||
{from: 8, to: 9},
|
||||
{from: 8, to: 10},
|
||||
{from: 10, to: 11},
|
||||
{from: 11, to: 12},
|
||||
{from: 12, to: 13},
|
||||
{from: 13, to: 14},
|
||||
{from: 9, to: 16}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
borderWidth:4,
|
||||
size:30,
|
||||
color: {
|
||||
border: '#222222',
|
||||
background: '#666666'
|
||||
},
|
||||
font:{color:'#eeeeee'}
|
||||
},
|
||||
edges: {
|
||||
color: 'lightgray'
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
67
web/bower_components/vis/examples/network/nodeStyles/colors.html
vendored
Normal file
67
web/bower_components/vis/examples/network/nodeStyles/colors.html
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Basic usage</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: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width:700px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Nodes can be all kinds of colors. This example shows all possible ways of defining colors. If you supply an object, the undefined fields will assume the default colors.
|
||||
When supplying a hex or rgb format color, it will be parsed and variations will be created for highlight and hover. Edges with inheritColor take the border colors.
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = new vis.DataSet([
|
||||
{id: 1, label:'html color', color: 'lime'},
|
||||
{id: 2, label:'rgb color', color: 'rgb(255,168,7)'},
|
||||
{id: 3, label:'hex color', color: '#7BE141'},
|
||||
{id: 4, label:'rgba color', color: 'rgba(97,195,238,0.5)'},
|
||||
{id: 5, label:'colorObject', color: {background:'pink', border:'purple'}},
|
||||
{id: 6, label:'colorObject + highlight', color: {background:'#F03967', border:'#713E7F',highlight:{background:'red',border:'black'}}},
|
||||
{id: 7, label:'colorObject + highlight + hover', color: {background:'cyan', border:'blue',highlight:{background:'red',border:'blue'},hover:{background:'white',border:'red'}}}
|
||||
])
|
||||
|
||||
// create an array with edges
|
||||
var edges = new vis.DataSet([
|
||||
{from: 1, to: 3},
|
||||
{from: 1, to: 2},
|
||||
{from: 2, to: 4},
|
||||
{from: 2, to: 5},
|
||||
{from: 2, to: 6},
|
||||
{from: 4, to: 7},
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {borderWidth: 2},
|
||||
interaction: {hover: true}
|
||||
}
|
||||
var network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
132
web/bower_components/vis/examples/network/nodeStyles/customGroups.html
vendored
Normal file
132
web/bower_components/vis/examples/network/nodeStyles/customGroups.html
vendored
Normal file
@@ -0,0 +1,132 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Custom Groups</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
color: #d3d3d3;
|
||||
font: 12pt arial;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid #444444;
|
||||
background-color: #222222;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<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">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<i class="fa fa-flag"></i> We use an icon once in the DOM so the CSS for fontAwesome is loaded.</h2>
|
||||
<div id="mynetwork"></div>
|
||||
<script type="text/javascript">
|
||||
var nodes = [
|
||||
{id: 0, label: "0", group: 'source'},
|
||||
{id: 1, label: "1", group: 'icons'},
|
||||
{id: 2, label: "2", group: 'icons'},
|
||||
{id: 3, label: "3", group: 'icons'},
|
||||
{id: 4, label: "4", group: 'icons'},
|
||||
{id: 5, label: "5", group: 'icons'},
|
||||
{id: 6, label: "6", group: 'icons'},
|
||||
{id: 7, label: "7", group: 'icons'},
|
||||
{id: 8, label: "8", group: 'icons'},
|
||||
{id: 9, label: "9", group: 'icons'},
|
||||
{id: 10, label: "10", group: 'mints'},
|
||||
{id: 11, label: "11", group: 'mints'},
|
||||
{id: 12, label: "12", group: 'mints'},
|
||||
{id: 13, label: "13", group: 'mints'},
|
||||
{id: 14, label: "14", group: 'mints'},
|
||||
{id: 15, group: 'dotsWithLabel'},
|
||||
{id: 16, group: 'dotsWithLabel'},
|
||||
{id: 17, group: 'dotsWithLabel'},
|
||||
{id: 18, group: 'dotsWithLabel'},
|
||||
{id: 19, group: 'dotsWithLabel'},
|
||||
{id: 20, label: "diamonds", group: 'diamonds'},
|
||||
{id: 21, label: "diamonds", group: 'diamonds'},
|
||||
{id: 22, label: "diamonds", group: 'diamonds'},
|
||||
{id: 23, label: "diamonds", group: 'diamonds'},
|
||||
];
|
||||
var edges = [
|
||||
{from: 1, to: 0},
|
||||
{from: 2, to: 0},
|
||||
{from: 4, to: 3},
|
||||
{from: 5, to: 4},
|
||||
{from: 4, to: 0},
|
||||
{from: 7, to: 6},
|
||||
{from: 8, to: 7},
|
||||
{from: 7, to: 0},
|
||||
{from: 10, to: 9},
|
||||
{from: 11, to: 10},
|
||||
{from: 10, to: 4},
|
||||
{from: 13, to: 12},
|
||||
{from: 14, to: 13},
|
||||
{from: 13, to: 0},
|
||||
{from: 16, to: 15},
|
||||
{from: 17, to: 15},
|
||||
{from: 15, to: 10},
|
||||
{from: 19, to: 18},
|
||||
{from: 20, to: 19},
|
||||
{from: 19, to: 4},
|
||||
{from: 22, to: 21},
|
||||
{from: 23, to: 22},
|
||||
{from: 23, to: 0},
|
||||
]
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 20,
|
||||
font: {
|
||||
size: 15,
|
||||
color: '#ffffff'
|
||||
},
|
||||
borderWidth: 2
|
||||
},
|
||||
edges: {
|
||||
width: 2
|
||||
},
|
||||
groups: {
|
||||
diamonds: {
|
||||
color: {background:'red',border:'white'},
|
||||
shape: 'diamond'
|
||||
},
|
||||
dotsWithLabel: {
|
||||
label: "I'm a dot!",
|
||||
shape: 'dot',
|
||||
color: 'cyan'
|
||||
},
|
||||
mints: {color:'rgb(0,255,140)'},
|
||||
icons: {
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'FontAwesome',
|
||||
code: '\uf0c0',
|
||||
size: 50,
|
||||
color: 'orange'
|
||||
}
|
||||
},
|
||||
source: {
|
||||
color:{border:'white'}
|
||||
}
|
||||
}
|
||||
};
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
119
web/bower_components/vis/examples/network/nodeStyles/groups.html
vendored
Normal file
119
web/bower_components/vis/examples/network/nodeStyles/groups.html
vendored
Normal file
@@ -0,0 +1,119 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Groups</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
color: #d3d3d3;
|
||||
font: 12pt arial;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid #444444;
|
||||
background-color: #222222;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
<script type="text/javascript">
|
||||
var color = 'gray';
|
||||
var len = undefined;
|
||||
|
||||
var nodes = [{id: 0, label: "0", group: 0},
|
||||
{id: 1, label: "1", group: 0},
|
||||
{id: 2, label: "2", group: 0},
|
||||
{id: 3, label: "3", group: 1},
|
||||
{id: 4, label: "4", group: 1},
|
||||
{id: 5, label: "5", group: 1},
|
||||
{id: 6, label: "6", group: 2},
|
||||
{id: 7, label: "7", group: 2},
|
||||
{id: 8, label: "8", group: 2},
|
||||
{id: 9, label: "9", group: 3},
|
||||
{id: 10, label: "10", group: 3},
|
||||
{id: 11, label: "11", group: 3},
|
||||
{id: 12, label: "12", group: 4},
|
||||
{id: 13, label: "13", group: 4},
|
||||
{id: 14, label: "14", group: 4},
|
||||
{id: 15, label: "15", group: 5},
|
||||
{id: 16, label: "16", group: 5},
|
||||
{id: 17, label: "17", group: 5},
|
||||
{id: 18, label: "18", group: 6},
|
||||
{id: 19, label: "19", group: 6},
|
||||
{id: 20, label: "20", group: 6},
|
||||
{id: 21, label: "21", group: 7},
|
||||
{id: 22, label: "22", group: 7},
|
||||
{id: 23, label: "23", group: 7},
|
||||
{id: 24, label: "24", group: 8},
|
||||
{id: 25, label: "25", group: 8},
|
||||
{id: 26, label: "26", group: 8},
|
||||
{id: 27, label: "27", group: 9},
|
||||
{id: 28, label: "28", group: 9},
|
||||
{id: 29, label: "29", group: 9}
|
||||
];
|
||||
var edges = [{from: 1, to: 0},
|
||||
{from: 2, to: 0},
|
||||
{from: 4, to: 3},
|
||||
{from: 5, to: 4},
|
||||
{from: 4, to: 0},
|
||||
{from: 7, to: 6},
|
||||
{from: 8, to: 7},
|
||||
{from: 7, to: 0},
|
||||
{from: 10, to: 9},
|
||||
{from: 11, to: 10},
|
||||
{from: 10, to: 4},
|
||||
{from: 13, to: 12},
|
||||
{from: 14, to: 13},
|
||||
{from: 13, to: 0},
|
||||
{from: 16, to: 15},
|
||||
{from: 17, to: 15},
|
||||
{from: 15, to: 10},
|
||||
{from: 19, to: 18},
|
||||
{from: 20, to: 19},
|
||||
{from: 19, to: 4},
|
||||
{from: 22, to: 21},
|
||||
{from: 23, to: 22},
|
||||
{from: 22, to: 13},
|
||||
{from: 25, to: 24},
|
||||
{from: 26, to: 25},
|
||||
{from: 25, to: 7},
|
||||
{from: 28, to: 27},
|
||||
{from: 29, to: 28},
|
||||
{from: 28, to: 0}
|
||||
]
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 30,
|
||||
font: {
|
||||
size: 32,
|
||||
color: '#ffffff'
|
||||
},
|
||||
borderWidth: 2
|
||||
},
|
||||
edges: {
|
||||
width: 2
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
196
web/bower_components/vis/examples/network/nodeStyles/icons.html
vendored
Normal file
196
web/bower_components/vis/examples/network/nodeStyles/icons.html
vendored
Normal file
@@ -0,0 +1,196 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Network | node as icon</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<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">
|
||||
|
||||
<style>
|
||||
#mynetworkFA,
|
||||
#mynetworkIO {
|
||||
height: 300px;
|
||||
width: 700px;
|
||||
border:1px solid lightgrey;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width:700px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script language="JavaScript">
|
||||
function draw() {
|
||||
/*
|
||||
* Example for FontAwesome
|
||||
*/
|
||||
var optionsFA = {
|
||||
groups: {
|
||||
usergroups: {
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'FontAwesome',
|
||||
code: '\uf0c0',
|
||||
size: 50,
|
||||
color: '#57169a'
|
||||
}
|
||||
},
|
||||
users: {
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'FontAwesome',
|
||||
code: '\uf007',
|
||||
size: 50,
|
||||
color: '#aa00ff'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// create an array with nodes
|
||||
var nodesFA = [{
|
||||
id: 1,
|
||||
label: 'User 1',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'User 2',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Usergroup 1',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'Usergroup 2',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 5,
|
||||
label: 'Organisation 1',
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'FontAwesome',
|
||||
code: '\uf1ad',
|
||||
size: 50,
|
||||
color: '#f0a30a'
|
||||
}
|
||||
}];
|
||||
|
||||
// create an array with edges
|
||||
var edges = [{
|
||||
from: 1,
|
||||
to: 3
|
||||
}, {
|
||||
from: 1,
|
||||
to: 4
|
||||
}, {
|
||||
from: 2,
|
||||
to: 4
|
||||
}, {
|
||||
from: 3,
|
||||
to: 5
|
||||
}, {
|
||||
from: 4,
|
||||
to: 5
|
||||
}];
|
||||
|
||||
// create a network
|
||||
var containerFA = document.getElementById('mynetworkFA');
|
||||
var dataFA = {
|
||||
nodes: nodesFA,
|
||||
edges: edges
|
||||
};
|
||||
|
||||
var networkFA = new vis.Network(containerFA, dataFA, optionsFA);
|
||||
|
||||
/*
|
||||
* Example for Ionicons
|
||||
*/
|
||||
var optionsIO = {
|
||||
groups: {
|
||||
usergroups: {
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'Ionicons',
|
||||
code: '\uf47c',
|
||||
size: 50,
|
||||
color: '#57169a'
|
||||
}
|
||||
},
|
||||
users: {
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'Ionicons',
|
||||
code: '\uf47e',
|
||||
size: 50,
|
||||
color: '#aa00ff'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// create an array with nodes
|
||||
var nodesIO = [{
|
||||
id: 1,
|
||||
label: 'User 1',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'User 2',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Usergroup 1',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'Usergroup 2',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 5,
|
||||
label: 'Organisation 1',
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'Ionicons',
|
||||
code: '\uf276',
|
||||
size: 50,
|
||||
color: '#f0a30a'
|
||||
}
|
||||
}];
|
||||
|
||||
|
||||
// create a network
|
||||
var containerIO = document.getElementById('mynetworkIO');
|
||||
var dataIO = {
|
||||
nodes: nodesIO,
|
||||
edges: edges
|
||||
};
|
||||
|
||||
var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body onload="draw()">
|
||||
<p>
|
||||
Icons can be used for nodes as well. This example shows Icons from fontAwesome and Ionicons but it should work with similar packages as well.
|
||||
It uses unicode and css to define the icons.<br><br> <b>Remember! Unicode in javascript is done like this: \uf274 for the unicode f274.</b>
|
||||
<br> If a node is shown as a rectangle, it means the css is not loaded (or not yet loaded). A redraw will fix that.
|
||||
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
<i class="fa fa-flag"></i> Use FontAwesome-icons for nodes</h2>
|
||||
<div id="mynetworkFA"></div>
|
||||
<h2>
|
||||
<i class="ion ion-ionic"></i> Use Ionicons-icons for nodes</h2>
|
||||
<div id="mynetworkIO"></div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
82
web/bower_components/vis/examples/network/nodeStyles/images.html
vendored
Normal file
82
web/bower_components/vis/examples/network/nodeStyles/images.html
vendored
Normal file
@@ -0,0 +1,82 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Images</title>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
var DIR = '../img/refresh-cl/';
|
||||
var EDGE_LENGTH_MAIN = 150;
|
||||
var EDGE_LENGTH_SUB = 50;
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function draw() {
|
||||
// Create a data table with nodes.
|
||||
nodes = [];
|
||||
|
||||
// Create a data table with links.
|
||||
edges = [];
|
||||
|
||||
nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
|
||||
nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
|
||||
nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
|
||||
edges.push({from: 1, to: 2, length: EDGE_LENGTH_MAIN});
|
||||
edges.push({from: 1, to: 3, length: EDGE_LENGTH_MAIN});
|
||||
|
||||
for (var i = 4; i <= 7; i++) {
|
||||
nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
|
||||
edges.push({from: 2, to: i, length: EDGE_LENGTH_SUB});
|
||||
}
|
||||
|
||||
nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
|
||||
edges.push({from: 2, to: 101, length: EDGE_LENGTH_SUB});
|
||||
|
||||
nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
|
||||
edges.push({from: 3, to: 102, length: EDGE_LENGTH_SUB});
|
||||
|
||||
nodes.push({id: 103, label: 'network drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
|
||||
edges.push({from: 1, to: 103, length: EDGE_LENGTH_SUB});
|
||||
|
||||
nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
|
||||
edges.push({from: 1, to: 104, length: EDGE_LENGTH_SUB});
|
||||
|
||||
for (var i = 200; i <= 201; i++ ) {
|
||||
nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
|
||||
edges.push({from: 3, to: i, length: EDGE_LENGTH_SUB});
|
||||
}
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<body onload="draw()">
|
||||
|
||||
<p>
|
||||
Display nodes as images.
|
||||
</p>
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
105
web/bower_components/vis/examples/network/nodeStyles/imagesWithBorders.html
vendored
Normal file
105
web/bower_components/vis/examples/network/nodeStyles/imagesWithBorders.html
vendored
Normal file
@@ -0,0 +1,105 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Images With Borders</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt arial;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
background-color:#333333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var DIR = 'img/soft-scraps-icons/';
|
||||
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function draw() {
|
||||
// create people.
|
||||
// value corresponds with the age of the person
|
||||
var DIR = '../img/indonesia/';
|
||||
nodes = [
|
||||
{id: 1, shape: 'image', image: DIR + '1.png'},
|
||||
{id: 2, shape: 'image', image: DIR + '2.png'},
|
||||
{id: 3, shape: 'image', image: DIR + '3.png'},
|
||||
{id: 4, shape: 'image', image: DIR + '4.png', label:"pictures by this guy!"},
|
||||
{id: 5, shape: 'image', image: DIR + '5.png'},
|
||||
{id: 6, shape: 'image', image: DIR + '6.png'},
|
||||
{id: 7, shape: 'image', image: DIR + '7.png'},
|
||||
{id: 8, shape: 'image', image: DIR + '8.png'},
|
||||
{id: 9, shape: 'image', image: DIR + '9.png'},
|
||||
{id: 10, shape: 'image', image: DIR + '10.png'},
|
||||
{id: 11, shape: 'image', image: DIR + '11.png'},
|
||||
{id: 12, shape: 'image', image: DIR + '12.png'},
|
||||
{id: 13, shape: 'image', image: DIR + '13.png'},
|
||||
{id: 14, shape: 'image', image: DIR + '14.png'},
|
||||
{id: 15, shape: 'image', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"},
|
||||
{id: 16, shape: 'image', image: DIR + 'anotherMissing.png', brokenImage: DIR + '9.png', label:"fallback image in action"}
|
||||
];
|
||||
|
||||
// create connections between people
|
||||
// value corresponds with the amount of contact between two people
|
||||
edges = [
|
||||
{from: 1, to: 2},
|
||||
{from: 2, to: 3},
|
||||
{from: 2, to: 4},
|
||||
{from: 4, to: 5},
|
||||
{from: 4, to: 10},
|
||||
{from: 4, to: 6},
|
||||
{from: 6, to: 7},
|
||||
{from: 7, to: 8},
|
||||
{from: 8, to: 9},
|
||||
{from: 8, to: 10},
|
||||
{from: 10, to: 11},
|
||||
{from: 11, to: 12},
|
||||
{from: 12, to: 13},
|
||||
{from: 13, to: 14},
|
||||
{from: 9, to: 16}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
borderWidth:4,
|
||||
size:30,
|
||||
color: {
|
||||
border: '#406897',
|
||||
background: '#6AAFFF'
|
||||
},
|
||||
font:{color:'#eeeeee'},
|
||||
shapeProperties: {
|
||||
useBorderWithImage:true
|
||||
}
|
||||
},
|
||||
edges: {
|
||||
color: 'lightgray'
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
119
web/bower_components/vis/examples/network/nodeStyles/shadows.html
vendored
Normal file
119
web/bower_components/vis/examples/network/nodeStyles/shadows.html
vendored
Normal file
@@ -0,0 +1,119 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Groups</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
color: #d3d3d3;
|
||||
font: 12pt arial;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid #444444;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
<script type="text/javascript">
|
||||
var len = undefined;
|
||||
|
||||
var nodes = [{id: 0, label: "0", group: 0},
|
||||
{id: 1, label: "1", group: 0},
|
||||
{id: 2, label: "2", group: 0},
|
||||
{id: 3, label: "3", group: 1},
|
||||
{id: 4, label: "4", group: 1},
|
||||
{id: 5, label: "5", group: 1},
|
||||
{id: 6, label: "6", group: 2},
|
||||
{id: 7, label: "7", group: 2},
|
||||
{id: 8, label: "8", group: 2},
|
||||
{id: 9, label: "9", group: 3},
|
||||
{id: 10, label: "10", group: 3},
|
||||
{id: 11, label: "11", group: 3},
|
||||
{id: 12, label: "12", group: 4},
|
||||
{id: 13, label: "13", group: 4},
|
||||
{id: 14, label: "14", group: 4},
|
||||
{id: 15, label: "15", group: 5},
|
||||
{id: 16, label: "16", group: 5},
|
||||
{id: 17, label: "17", group: 5},
|
||||
{id: 18, label: "18", group: 6},
|
||||
{id: 19, label: "19", group: 6},
|
||||
{id: 20, label: "20", group: 6},
|
||||
{id: 21, label: "21", group: 7},
|
||||
{id: 22, label: "22", group: 7},
|
||||
{id: 23, label: "23", group: 7},
|
||||
{id: 24, label: "24", group: 8},
|
||||
{id: 25, label: "25", group: 8},
|
||||
{id: 26, label: "26", group: 8},
|
||||
{id: 27, label: "27", group: 9},
|
||||
{id: 28, label: "28", group: 9},
|
||||
{id: 29, label: "29", group: 9}
|
||||
];
|
||||
var edges = [{from: 1, to: 0},
|
||||
{from: 2, to: 0},
|
||||
{from: 4, to: 3},
|
||||
{from: 5, to: 4},
|
||||
{from: 4, to: 0},
|
||||
{from: 7, to: 6},
|
||||
{from: 8, to: 7},
|
||||
{from: 7, to: 0},
|
||||
{from: 10, to: 9},
|
||||
{from: 11, to: 10},
|
||||
{from: 10, to: 4},
|
||||
{from: 13, to: 12},
|
||||
{from: 14, to: 13},
|
||||
{from: 13, to: 0},
|
||||
{from: 16, to: 15},
|
||||
{from: 17, to: 15},
|
||||
{from: 15, to: 10},
|
||||
{from: 19, to: 18},
|
||||
{from: 20, to: 19},
|
||||
{from: 19, to: 4},
|
||||
{from: 22, to: 21},
|
||||
{from: 23, to: 22},
|
||||
{from: 22, to: 13},
|
||||
{from: 25, to: 24},
|
||||
{from: 26, to: 25},
|
||||
{from: 25, to: 7},
|
||||
{from: 28, to: 27, shadow:{color:'rgb(0,255,0)'}},
|
||||
{from: 29, to: 28},
|
||||
{from: 28, to: 0}
|
||||
]
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 30,
|
||||
font: {
|
||||
size: 32
|
||||
},
|
||||
borderWidth: 2,
|
||||
shadow:true
|
||||
},
|
||||
edges: {
|
||||
width: 2,
|
||||
shadow:true
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
73
web/bower_components/vis/examples/network/nodeStyles/shapes.html
vendored
Normal file
73
web/bower_components/vis/examples/network/nodeStyles/shapes.html
vendored
Normal file
@@ -0,0 +1,73 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Shapes</title>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 1000px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
nodes = [
|
||||
{id: 1, label: 'circle', shape: 'circle' },
|
||||
{id: 2, label: 'ellipse', shape: 'ellipse'},
|
||||
{id: 3, label: 'database',shape: 'database'},
|
||||
{id: 4, label: 'box', shape: 'box' },
|
||||
{id: 5, label: 'diamond', shape: 'diamond'},
|
||||
{id: 6, label: 'dot', shape: 'dot'},
|
||||
{id: 7, label: 'square', shape: 'square'},
|
||||
{id: 8, label: 'triangle',shape: 'triangle'},
|
||||
{id: 9, label: 'triangleDown', shape: 'triangleDown'},
|
||||
{id: 10, label: 'text', shape: 'text'},
|
||||
{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: '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 = [
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<body onload="draw()">
|
||||
|
||||
<p>
|
||||
Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
|
||||
</p>
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<div id="info"></div>
|
||||
</body>
|
||||
</html>
|
||||
61
web/bower_components/vis/examples/network/nodeStyles/shapesWithDashedBorders.html
vendored
Normal file
61
web/bower_components/vis/examples/network/nodeStyles/shapesWithDashedBorders.html
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Shapes</title>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 1000px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
nodes = [
|
||||
{id: 1, font:{size:30}, label: 'circle', shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 2, font:{size:30}, label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 3, font:{size:30}, label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 4, font:{size:30}, label: 'box', shape: 'box' , shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 5, font:{size:30}, size:40, label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 6, font:{size:30}, size:40, label: 'dot', shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 7, font:{size:30}, size:40, label: 'square', shape: 'square', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 8, font:{size:30}, size:40, label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 9, font:{size:30}, size:40, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 10, font:{size:30}, size:40, label: 'star', shape: 'star', shapeProperties:{borderDashes:true}},
|
||||
{id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
|
||||
];
|
||||
|
||||
edges = [
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<body onload="draw()">
|
||||
|
||||
<p>
|
||||
Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
|
||||
</p>
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<div id="info"></div>
|
||||
</body>
|
||||
</html>
|
||||
121
web/bower_components/vis/examples/network/nodeStyles/widthHeight.html
vendored
Normal file
121
web/bower_components/vis/examples/network/nodeStyles/widthHeight.html
vendored
Normal file
@@ -0,0 +1,121 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Label Width and Height Settings</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: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
code {
|
||||
font-size: 14px;
|
||||
background: #dddddd;
|
||||
}
|
||||
p {
|
||||
max-width: 600px;
|
||||
}
|
||||
.indented {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.sep {
|
||||
height: 1px;
|
||||
width: 35%;
|
||||
margin-left: 40px;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Nodes may be set to have fixed, minimum and maximum widths and minimum heights.
|
||||
Nodes with minimum heights may also have a vertical alignment set.</p>
|
||||
|
||||
<p>Edges may be set to have maximum widths.</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p>The <code>widthConstraint: value</code> option means a fixed width, the minimum and maximum width of the element are set to the value (respecting left and right margins). Lines exceeding the maximum width will be broken at space boundaries to fit.</p>
|
||||
<p>The <code>widthConstraint: { minimum: value }</code> option sets the minimum width of the element to the value.</p>
|
||||
<p>The <code>widthConstraint: { maximum: value }</code> option sets the maximum width of the element to the value (respecting left and right margins). Lines exceeding the maximum width will be broken at space boundaries to fit.</p>
|
||||
<p>Minimum width line sizing is applied after maximum width line breaking, so counterintuitively, the minimum being greater than the maximum has a meaningful interpretation.</p>
|
||||
|
||||
<div class="sep"></div>
|
||||
|
||||
<p>The <code>heightConstraint: value</code> option sets the minimum height of the element to the value (respecting top and bottom margins).</p>
|
||||
<p>The <code>heightConstraint: { minimum: value }</code> option also sets the minimum height of the element to the value (respecting top and bottom margins).</p>
|
||||
<p>The <code>heightConstraint: { valign: value }</code> option (with value <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, sets the alignment of the text in the element's label to the elements top, middle or bottom (respecting top and bottom margins) when it's height is less than the minimum. The middle value is the default.</p>
|
||||
|
||||
<div class="sep"></div>
|
||||
|
||||
<p>Node width and height constraints may both be applied together, of course.</p>
|
||||
<p>The constraint options may be applied to elements individually, or at the whole-set level.
|
||||
Whole-set node and edge constraints are exclusive.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = [
|
||||
{ id: 100, label: 'This node has no fixed, minimum or maximum width or height', x: -50, y: -300 },
|
||||
{ id: 210, widthConstraint: { minimum: 120 }, label: 'This node has a mimimum width', x: -400, y: -200 },
|
||||
{ id: 211, widthConstraint: { minimum: 120 }, label: '...so does this', x: -500, y: -50 },
|
||||
{ id: 220, widthConstraint: { maximum: 170 }, label: 'This node has a maximum width and breaks have been automatically inserted into the label', x: -150, y: -150 },
|
||||
{ id: 221, widthConstraint: { maximum: 170 }, label: '...this too', x: -100, y: 0 },
|
||||
{ id: 200, font: { multi: true }, widthConstraint: 150, label: '<b>This</b> node has a fixed width and breaks have been automatically inserted into the label', x: -300, y: 50 },
|
||||
{ id: 201, widthConstraint: 150, label: '...this as well', x: -300, y: 200 },
|
||||
{ id: 300, heightConstraint: { minimum: 70 }, label: 'This node\nhas a\nminimum\nheight', x: 100, y: -150 },
|
||||
{ id: 301, heightConstraint: { minimum: 70 }, label: '...this one here too', x: 100, y: 0 },
|
||||
{ id: 400, heightConstraint: { minimum: 100, valign: 'top' }, label: 'Minimum height\nvertical alignment\nmay be top', x: 300, y: -200 },
|
||||
{ id: 401, heightConstraint: { minimum: 100, valign: 'middle' }, label: 'Minimum height\nvertical alignment\nmay be middle\n(default)', x: 300, y: 0 },
|
||||
{ id: 402, heightConstraint: { minimum: 100, valign: 'bottom' }, label: 'Minimum height\nvertical alignment\nmay be bottom', x: 300, y: 200 }
|
||||
];
|
||||
|
||||
var edges = [
|
||||
{ from: 100, to: 210, label: "unconstrained to minimum width"},
|
||||
{ from: 210, to: 211, label: "more minimum width"},
|
||||
{ from: 100, to: 220, label: "unconstrained to maximum width"},
|
||||
{ from: 220, to: 221, label: "more maximum width"},
|
||||
{ from: 210, to: 200, label: "minimum width to fixed width"},
|
||||
{ from: 220, to: 200, label: "maximum width to fixed width"},
|
||||
{ from: 200, to: 201, label: "more fixed width"},
|
||||
{ from: 100, to: 300, label: "unconstrained to minimum height"},
|
||||
{ from: 300, to: 301, label: "more minimum height"},
|
||||
{ from: 100, to: 400, label: "unconstrained to top valign"},
|
||||
{ from: 400, to: 401, label: "top valign to middle valign"},
|
||||
{ from: 401, to: 402, widthConstraint: { maximum: 150 }, label: "middle valign to bottom valign"},
|
||||
];
|
||||
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
edges: {
|
||||
font: {
|
||||
size: 12
|
||||
},
|
||||
widthConstraint: {
|
||||
maximum: 90
|
||||
}
|
||||
},
|
||||
nodes: {
|
||||
shape: 'box',
|
||||
margin: 10,
|
||||
widthConstraint: {
|
||||
maximum: 200
|
||||
}
|
||||
},
|
||||
physics: {
|
||||
enabled: false
|
||||
}
|
||||
};
|
||||
var network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user