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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
{% extends "layout.html" %}
{% block content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.6.0/cytoscape.min.js" integrity="sha256-uZV2wRlscgr52q3Wb3Oew0rKCPsM3g4aBTv46sF4qzg=" crossorigin="anonymous"></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': '9%'
}
},
{ selector: 'edge',
css: {
'content': 'data(sentCnt)',
'line-color':'black',
'opacity': 'mapData(sentCnt, 1, 50, 0.3, 1)',
'width': 'mapData(sentCnt, 1, 50, 0.3, 4)',
'font-size': '9%'
}
},
{ selector: 'node.highlight',
style: {
'border-color': '#FFF',
'border-width': '2px'
}
},
{
selector: 'node.semitransp',
style:{ 'opacity': '0.5' }
},
{
selector: 'edge.highlight',
style: { 'line-color': 'red' },
},
{
selector: 'edge.semitransp',
style:{ 'opacity': '0.01' }
}
],
elements:[ {{ elements | safe }} ],
layout: {
name: 'concentric',
concentric: function( node ){
return node.degree();
},
levelWidth: function( nodes ){
return 6;
}
}
});
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('tap', 'node', 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 %}
|
