1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
{% extends "layout.html" %}
{% block content %}
<script type="text/javascript" src="{{ url_for('static', filename='cytoscape.min.js') }}"></script>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
style: [
{ selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'background-color': 'data(nodecolor)',
'font-weight': 'data(fontweight)',
'font-size': '20%'
}
},
{ selector: 'edge',
css: {
'content': 'data(sentCnt)',
'curve-style': 'bezier'
}
},
{ selector: 'node.highlight',
style: {
'border-color': '#FFF',
'border-width': '2px'
}
},
{
selector: 'node.semitransp',
style:{ 'opacity': '0.5' }
},
{
selector: 'edge.highlight',
style: { 'mid-target-arrow-color': '#FFF' }
},
{
selector: 'edge.semitransp',
style:{ 'opacity': '0.2' }
}
],
elements:[ {{ elements | safe }} ],
layout: {
name: 'circle'
}
});
cy.on('tap', 'edge', function(){
try { // your browser may block popups
window.open( this.data('url') );
} catch(e){ // fall back on url change
window.location.href = this.data('url');
}
});
cy.on('mouseover', 'node', function(e){
var sel = e.target;
cy.elements().difference(sel.outgoers()).not(sel).addClass('semitransp');
sel.addClass('highlight').outgoers().addClass('highlight');
});
cy.on('mouseout', 'node', function(e){
var sel = e.target;
cy.elements().removeClass('semitransp');
sel.removeClass('highlight').outgoers().removeClass('highlight');
});
</script>
{% endblock %}
|
