ccnetviz
Version:
[](https://travis-ci.org/HelikarLab/ccNetViz) [](https://www.gnu.org/licenses/gpl-3.0) [![semantic-releas
141 lines (131 loc) • 4.57 kB
HTML
<html>
<head>
<title>Advanced Arrow Plugin</title>
<link rel="stylesheet" type="text/css" href="css/template.css" />
<script src="../lib/ccNetViz.js"></script>
<script src="../lib/plugins/ccNetViz-arrow-plugin.js"></script>
</head>
<body>
<div class="canvas-container">
<h3 class="title">Advanced Arrow Plugin</h3>
<canvas id="canvas"></canvas>
<div class="description">
Advanced arrow plugin allows you to add different arrow styles to your
ccNetViz library.
</div>
</div>
<div class="canvas-container">
<h3 class="title">Animated Arrows</h3>
<canvas id="canvas-2"></canvas>
<div class="description">
More detailed information please visit the
<a
href="https://github.com/HelikarLab/ccNetViz/tree/master/src/plugins/arrow"
>documentation page</a
>.
</div>
</div>
<header id="logo">
<a href="https://helikarlab.github.io/ccNetViz/">
<img src="images/logo.svg" />
</a>
</header>
<script>
window.addEventListener('DOMContentLoaded', event => {
var canvas = document.getElementById('canvas');
var graph = new ccNetViz(canvas, {
styles: {
node: { texture: 'images/node.png', label: { hideSize: 16 } },
'new arrow': {
arrow: {
type: 'delta',
size: 20,
round: true,
textureGradient: [
{ x: 0, color: '#00b8ff' },
{ x: 0.5, color: '#065979' },
{ x: 1, color: '#00b8ff' },
],
stroke: {
size: 5,
color: '#333',
round: true,
},
},
},
'custom arrow': {
arrow: {
type: 'custom arrow',
textureColor: '#cf0101',
size: 20,
lines: [
{ x: 0.5, y: 0 },
{ x: 1, y: 1 },
{ x: 0.9, y: 1 },
{ x: 0.5, y: 0.7 },
{ x: 0.1, y: 1 },
{ x: 0, y: 1 },
],
},
},
},
});
var nodes = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
let edges = [
{ source: nodes[0], style: 'arrow', target: nodes[1] },
{ source: nodes[1], style: 'arrow short', target: nodes[2] },
{ source: nodes[2], style: 'diamond', target: nodes[3] },
{ source: nodes[3], style: 'diamond short', target: nodes[4] },
{ source: nodes[4], style: 'T', target: nodes[5] },
{ source: nodes[5], style: 'harpoon up', target: nodes[6] },
{ source: nodes[6], style: 'harpoon down', target: nodes[7] },
{ source: nodes[7], style: 'thin arrow', target: nodes[8] },
{ source: nodes[8], style: 'new arrow', target: nodes[9] },
{ source: nodes[9], style: 'custom arrow', target: nodes[0] },
];
graph.set(nodes, edges, 'circular').then(() => {
graph.draw();
});
canvas = document.getElementById('canvas-2');
graph = new ccNetViz(canvas, {
styles: {
node: { texture: 'images/node.png', label: { hideSize: 16 } },
edge: { arrow: { texture: 'images/arrow.png' } },
'new arrow': {
arrow: {
animation: { type: 'size' },
type: 'delta',
size: 12,
},
},
'color arrow': {
arrow: {
animation: { type: 'color', color: '#cf0101' },
type: 'diamond',
size: 16,
},
},
'stroke arrow': {
arrow: {
animation: { type: 'stroke', color: '#cf0101' },
type: 'delta short',
size: 16,
},
},
},
});
nodes = [{}, {}, {}, {}];
edges = [
{ source: nodes[0], style: 'stroke arrow', target: nodes[1] },
{ source: nodes[1], style: 'new arrow', target: nodes[2] },
{ source: nodes[2], style: 'harpoon down', target: nodes[3] },
{ source: nodes[3], style: 'color arrow', target: nodes[0] },
];
graph.set(nodes, edges, 'circular').then(() => {
graph.draw();
});
});
</script>
</body>
</html>