ccnetviz
Version:
[](https://travis-ci.org/HelikarLab/ccNetViz) [](https://www.gnu.org/licenses/gpl-3.0) [![semantic-releas
56 lines (54 loc) • 1.72 kB
HTML
<html>
<head>
<title>ccNetViz User Defined Layout Example</title>
<link rel="stylesheet" type="text/css" href="css/template.css" />
<script src="../lib/ccNetViz.js"></script>
</head>
<body>
<div class="canvas-container">
<h3 class="title">User Defined Layout</h3>
<canvas id="canvas"></canvas>
<div class="description">
n this example, all nodes are manually positioned with x and y
attributes.
<br />
More detailed information please visit the
<a href="https://helikarlab.github.io/ccNetViz/#doc"
>documentation page</a
>.
</div>
</div>
<header id="logo">
<a href="https://helikarlab.github.io/ccNetViz/">
<img src="images/logo.svg" />
</a>
</header>
<script>
var canvas = document.getElementById('canvas');
var graph = new ccNetViz(canvas, {
styles: {
node: { texture: 'images/node.png', label: { hideSize: 16 } },
edge: { arrow: { texture: 'images/arrow.png' } },
},
});
var nodes = [
{ label: 'Hello', x: 0, y: 1 },
{ label: 'World', x: 1, y: 1 },
{ label: '!', x: 0.5, y: 0 },
{ label: 'I am in center', x: 0.5, y: 0.5 },
{ label: 'Right bottom corner', x: 1, y: 0 },
];
var edges = [
{ source: nodes[0], target: nodes[1] },
{ source: nodes[1], target: nodes[0] },
{ source: nodes[0], target: nodes[0] },
{ source: nodes[1], target: nodes[2] },
{ source: nodes[2], target: nodes[4] },
];
graph.set(nodes, edges).then(() => {
graph.draw();
});
</script>
</body>
</html>