ccnetviz
Version:
[](https://travis-ci.org/HelikarLab/ccNetViz) [](https://www.gnu.org/licenses/gpl-3.0) [![semantic-releas
78 lines (71 loc) • 2.19 kB
HTML
<!DOCTYPE html>
<html>
<head>
<script src="../lib/ccNetViz.js"></script>
<script src="../../lib/plugins/ccNetViz-multilevel-plugin.js"></script>
<style>
canvas,
html,
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
window.addEventListener('DOMContentLoaded', event => {
var settings = {
styles: {
node: {
texture: '../../examples/images/node.png',
label: { hideSize: 16 },
},
edge: { arrow: { texture: '../../examples/images/arrow.png' } },
},
};
var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
document.body.appendChild(canvas);
var graph = new ccNetViz(canvas, settings);
var nodes1 = [
{ label: 'Node1 of subgraph1' },
{ label: 'Node2 of subgraph1' },
];
var edges1 = [
{ source: nodes1[0], target: nodes1[1] },
{ source: nodes1[0], target: nodes1[0] },
{ source: nodes1[1], target: nodes1[0] },
];
var nodes2 = [
{ label: 'Node1 of subgraph2' },
{ label: 'Node2 of subgraph2' },
{ label: 'Node3 of subgraph2' },
{ label: 'Node4 of subgraph2' },
{ label: 'Node5 of subgraph2' },
];
var edges2 = [
{ source: nodes2[0], target: nodes2[1] },
{ source: nodes2[0], target: nodes2[0] },
{ source: nodes2[1], target: nodes2[0] },
{ source: nodes2[3], target: nodes2[4] },
];
var nodes = [
{ label: 'Hello', nodes: nodes2, edges: edges2 },
{ label: 'World', nodes: nodes1, edges: edges1 },
{ label: '!' },
];
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] },
];
graph.set(nodes, edges, 'force').then(() => {
graph.draw();
});
});
</script>
</body>
</html>