ccnetviz
Version:
[](https://travis-ci.org/HelikarLab/ccNetViz) [](https://www.gnu.org/licenses/gpl-3.0) [![semantic-releas
114 lines (100 loc) • 3.34 kB
HTML
<html>
<head>
<title>ccNetViz Tree Layouts Example</title>
<link rel="stylesheet" type="text/css" href="css/template.css" />
<script src="../lib/ccNetViz.js"></script>
<script src="./libs/jquery.min.js"></script>
</head>
<body>
<div class="canvas-container">
<h3 class="title">Different graphs example</h3>
<div class="toolbox">
<div class="item">
<select id="listExamples"></select>
</div>
</div>
<div class="description">
<div id="report">
<b>Nodes</b>: <span id="nodesCnt"></span><br />
<b>Edges</b>: <span id="edgesCnt"></span><br />
Rendered in <span id="renderedIn"></span>ms<br />
</div>
<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 examples = 'tree1.json,tree2.json'.split(',');
function init() {
function onChange(e) {
var v = $(this).val();
$.ajax({ url: 'data/' + v, dataType: 'json' }).done(showGraph);
}
function onChange2(e) {
layout = $(this).val();
showGraph(adata);
}
//fill in graph names
var select = $('#listExamples');
$.each(examples, function(index, val) {
select.append($('<option />', { value: val }).text(val));
});
select.change(onChange);
//init graph with currently selected data
onChange.call(select);
//fill in layout names
var select2 = $('#listLayouts');
$.each(['tree', 'tree2'], function(index, val) {
select2.append($('<option />', { value: val }).text(val));
});
select2.change(onChange2);
//init graph with currently selected layout
onChange2.call(select2);
}
var graph;
var el;
function showGraph(data) {
adata = data;
if (el) el.parentNode.removeChild(el);
document
.querySelector('.canvas-container .title')
.after((el = document.createElement('canvas')));
var startTime = new Date();
if (graph) graph.remove(); //if there was an old graph, remove its handlers from DOM content
graph = new ccNetViz(el, {
styles: {
node: { texture: 'images/node.png', label: { hideSize: 16 } },
edge: { arrow: { texture: 'images/arrow.png' } },
},
});
if (layout == null) {
layout = 'tree';
}
let layout_options = {
direction: 'top-down',
// "direction": "bottom-up",
// "direction": "right-left",
// "direction": "banana",
};
graph.set(data.nodes, data.edges, layout, layout_options).then(() => {
graph.draw();
});
$('#nodesCnt').text(data.nodes.length);
$('#edgesCnt').text(data.edges.length);
$('#renderedIn').text(
Math.round((new Date().getTime() - startTime.getTime()) * 10) / 10
);
}
$(init);
</script>
</body>
</html>