@ -0,0 +1,63 @@ | |||
<!doctype html> | |||
<html> | |||
<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" /> | |||
<style type="text/css"> | |||
#mynetwork { | |||
width: 400px; | |||
height: 400px; | |||
border: 1px solid lightgray; | |||
background: #d1d1d1; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div id="mynetwork"></div> | |||
<script type="text/javascript"> | |||
// create an array with nodes | |||
var nodes = [ | |||
{id: 1, label: 'Node 1', fontStrokeWidth : 5, fontStrokeColor: 'white'}, | |||
{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 | |||
var edges = [ | |||
{from: 1, to: 2, label: 'edgeLabel', fontStrokeWidth : 2, fontStrokeColor : '#00ff00'}, | |||
{from: 1, to: 3, label: 'edgeLabel'}, | |||
{from: 2, to: 4}, | |||
{from: 2, to: 5} | |||
]; | |||
// create a network | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
nodes : { | |||
shape : 'dot', | |||
fontStrokeWidth : 1, | |||
fontStrokeColor : '#d1d1d1' | |||
}, | |||
edges : { | |||
fontStrokeWidth : 1, | |||
fontStrokeColor : '#d1d1d1', | |||
fontFill : 'none' | |||
} | |||
}; | |||
var network = new vis.Network(container, data, options); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,85 @@ | |||
<!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.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 data = '<svg xmlns="http://www.w3.org/2000/svg" width="243" 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> like' + | |||
'<span style="color:white; text-shadow:0 0 20px #000000;">' + | |||
'cheese</span>' + | |||
'</div>' + | |||
'</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); | |||
// 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 = { | |||
stabilize: false, | |||
smoothCurves: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> |
@ -0,0 +1,51 @@ | |||
<!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: 400px; | |||
height: 400px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div id="mynetwork"></div> | |||
<script type="text/javascript"> | |||
// create an array with nodes | |||
var nodes = [ | |||
{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 | |||
var edges = [ | |||
{from: 1, to: 2, label: '1 to 2', labelAlignment:'line-center', fontFill:'orange' }, | |||
{from: 1, to: 3, label: '1 to 3', labelAlignment:'line-above', fontFill:'green'}, | |||
{from: 2, to: 4, label: '2 to 4', fontFill:'red'}, | |||
{from: 2, to: 5, label: '2 to 5', labelAlignment:'line-below', fontFill:'#ccd' } | |||
]; | |||
// 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> | |||
</body> | |||
</html> |
@ -1,30 +0,0 @@ | |||
0 info it worked if it ends with ok | |||
1 verbose cli [ 'C:\\Program Files\\nodejs\\\\node.exe', | |||
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', | |||
1 verbose cli 'run', | |||
1 verbose cli 'watch-dev' ] | |||
2 info using npm@1.4.14 | |||
3 info using node@v0.10.29 | |||
4 verbose node symlink C:\Program Files\nodejs\\node.exe | |||
5 verbose run-script [ 'prewatch-dev', 'watch-dev', 'postwatch-dev' ] | |||
6 info prewatch-dev vis@3.7.2-SNAPSHOT | |||
7 info watch-dev vis@3.7.2-SNAPSHOT | |||
8 verbose unsafe-perm in lifecycle true | |||
9 info vis@3.7.2-SNAPSHOT Failed to exec watch-dev script | |||
10 error vis@3.7.2-SNAPSHOT watch-dev: `gulp watch --bundle` | |||
10 error Exit status 8 | |||
11 error Failed at the vis@3.7.2-SNAPSHOT watch-dev script. | |||
11 error This is most likely a problem with the vis package, | |||
11 error not with npm itself. | |||
11 error Tell the author that this fails on your system: | |||
11 error gulp watch --bundle | |||
11 error You can get their info via: | |||
11 error npm owner ls vis | |||
11 error There is likely additional logging output above. | |||
12 error System Windows_NT 6.1.7601 | |||
13 error command "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "watch-dev" | |||
14 error cwd C:\Dropbox\Almende\Projects\JavaScript\vis | |||
15 error node -v v0.10.29 | |||
16 error npm -v 1.4.14 | |||
17 error code ELIFECYCLE | |||
18 verbose exit [ 1, true ] |