98 lines
2.6 KiB
HTML
98 lines
2.6 KiB
HTML
<script>
|
|
|
|
var data = $.getJSON("{{ site.baseurl }}/public/data/channelslist.json");
|
|
|
|
var cy = window.cy = cytoscape({
|
|
container: document.getElementById('cy'),
|
|
elements: data,
|
|
style: [
|
|
{
|
|
selector: 'node',
|
|
style: {
|
|
'label': 'data(label)',
|
|
'text-valign': 'center',
|
|
'background-color': 'data(color)',
|
|
'width': 'data(size)',
|
|
'height': 'data(size)',
|
|
'color': 'white',
|
|
'text-outline-width': 2,
|
|
'text-outline-color': '#888'
|
|
}
|
|
},
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'line-color': 'data(color)'
|
|
}
|
|
}],
|
|
layout: {
|
|
name: 'cose',
|
|
nodeDimensionsIncludeLabels: true,
|
|
nodeOverlap: 50
|
|
}
|
|
});
|
|
|
|
cy.on('ready', function (e) {
|
|
cy.$('#mare').lock();
|
|
});
|
|
|
|
cy.on('tap', 'node', function () {
|
|
try { // your browser may block popups
|
|
window.open(this.data('href'));
|
|
} catch (e) { // fall back on url change
|
|
window.location.href = this.data('href');
|
|
}
|
|
});
|
|
|
|
cy.automove({
|
|
nodesMatching: function( node ) {
|
|
return cy.$('#technologie').allAreNeighbors(node);
|
|
},
|
|
reposition: 'drag',
|
|
dragWith: function( node ) {
|
|
return node.id() == cy.$('#technologie').id();
|
|
}
|
|
});
|
|
|
|
cy.automove({
|
|
nodesMatching: function( node ) {
|
|
return cy.$('#global').allAreNeighbors(node);
|
|
},
|
|
reposition: 'drag',
|
|
dragWith: function( node ) {
|
|
return node.id() == cy.$('#global').id();
|
|
}
|
|
});
|
|
|
|
cy.automove({
|
|
nodesMatching: function( node ) {
|
|
return cy.$('#ecologie').allAreNeighbors(node);
|
|
},
|
|
reposition: 'drag',
|
|
dragWith: function( node ) {
|
|
return node.id() == cy.$('#ecologie').id();
|
|
}
|
|
});
|
|
|
|
cy.automove({
|
|
nodesMatching: function( node ) {
|
|
return cy.$('#project').allAreNeighbors(node);
|
|
},
|
|
reposition: 'drag',
|
|
dragWith: function( node ) {
|
|
return node.id() == cy.$('#project').id();
|
|
}
|
|
});
|
|
|
|
cy.automove({
|
|
nodesMatching: function( node ) {
|
|
return cy.$('#democratie').allAreNeighbors(node);
|
|
},
|
|
reposition: 'drag',
|
|
dragWith: function( node ) {
|
|
return node.id() == cy.$('#democratie').id();
|
|
}
|
|
});
|
|
</script>
|
|
|