ccnetviz
Version:
[](https://travis-ci.org/HelikarLab/ccNetViz) [](https://www.gnu.org/licenses/gpl-3.0) [![semantic-releas
85 lines (77 loc) • 2.48 kB
HTML
<html>
<head>
<title>ccNetViz line animation example</title>
<link rel="stylesheet" type="text/css" href="css/template.css" />
<script src="../lib/ccNetViz.js"></script>
<script src="../lib/plugins/ccNetViz-animation-edge-plugin.js"></script>
<script src="./libs/jquery.min.js"></script>
</head>
<body>
<div class="canvas-container">
<h3 class="title">Line animation example</h3>
<div class="toolbox">
<div class="item">
<label>Animation type:</label>
<select id="animate-select" onchange="onAnimationChange()">
<option value="none">None</option>
<option selected value="basic">Basic</option>
<option value="gradient">Gradient</option>
</select>
</div>
</div>
<div class="description">
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>
const data = {
nodes: [{ label: '1' }, { label: '2' }, { label: '3' }, { label: '4' }],
edges: [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 2, target: 3 },
],
};
options = {
styles: {
node: {
texture: 'images/node.png',
},
edge: {
width: 5,
type: 'dotted',
color: 'rgb(200, 200, 200)',
animateType: 'basic', // "basic", "gradient", "none"
animateColor: 'rgb(240, 80, 100)',
},
},
};
function onAnimationChange() {
const el = document.querySelector('#animate-select');
const val = el.options[el.selectedIndex].value;
window.options.styles.edge.animateType = val;
showGraph(window.options);
}
function showGraph(options) {
jQuery('canvas').remove();
const el = document.querySelector('.canvas-container .title');
canvas = document.createElement('canvas');
el.after(canvas);
const graph = new ccNetViz(canvas, options);
graph.set(data.nodes, data.edges, 'force').then(() => {
graph.draw();
});
}
showGraph(options);
</script>
</body>
</html>